npm 包 @wilcho/webpack-boilerplate 使用教程

阅读时长 6 分钟读完

Webpack 是前端开发中常用的打包工具,它可以将项目中的多个 JavaScript 文件打包成一个或多个 JavaScript 文件,以及将其他资源(如 CSS、图片等)打包到同一个文件中,以减少 HTTP 请求。在开发过程中使用一个好的 Webpack 模板可以为我们节省很多时间。本教程将介绍一个方便易用的 Webpack 模板 @wilcho/webpack-boilerplate。

安装

你可以通过 npm 安装 @wilcho/webpack-boilerplate。

注意,该模板依赖于 Node.js 版本需要 >= 10 才能运行。

使用

该模板默认提供了两种运行模式:devbuild

开发模式

运行以下命令启动模板的开发模式:

该命令执行完毕后,将启动一个开发服务器。在浏览器中打开 http://localhost:8080 页面,即可查看网页。在运行开发模式时,每当你修改你的代码时,都将会实时的在浏览器中更新。

生产模式

运行以下命令启动该模板的构建(打包)模式:

该命令将会编译你的代码,将代码打包到合并的文件中,并优化最终的文件。

所有文件默认打包到 dist/ 文件夹中。你可以在项目中新建此目录。

配置

如果你想进一步配置此模板,请编辑项目根目录下的 webpack.config.js 文件。其中有两个对象,分别对应开发模式和生产模式。你可以根据项目需求修改后保存。

-- -------------------- ---- -------
-- ------
----- --------- - -
  -- --- --
-

-- ------
----- ----------- - -
  -- --- --
-

示例

这是一个简单的 HTML 文件,它使用了 Bootstrap 和 jQuery。

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    -------------- ------------
    ----- ---------------- ---------------------------------------------------------------------------------------
  -------
  ------

    ---- ------------- ---------------- ----------- ---------
      -- -------------------- -------------------
      ------- ---------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
        ----- -----------------------------------
      ---------
      ---- --------------- ---------------- ---------------
        --- -------------------
          --- --------------- --------
            -- ---------------- -----------------
          -----
          --- -----------------
            -- ---------------- ---------------------
          -----
          --- -----------------
            -- ---------------- --------------------
          -----
          --- -----------------
            -- --------------- --------- ---------------------
          -----
        -----
      ------
    ------

    ---- ------------------
      ---------- -------------
      ------- -- -- ------- -- ------------
      ------- ---------- ------------------ -----------
    ------

    ------- ----------------------------------------------------------------------------
    ------- ---------------------------------------------------------------------------------------------
  -------
-------

保存上述内容并将其保存为 index.html 文件。接着,在 webpack.config.js 文件中添加以下内容:

-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  -------- -
    --- -------------------
      --------- -------------
    ---
  --
--

现在,我们还需要创建一个 JavaScript 文件来处理一些我们需要的东西。在项目根目录下创建一个名为 src 的文件夹,并在该文件夹中创建一个名为 index.js 的文件:

-- -------------------- ---- -------
-- -- --------- - ------
------ ------------
------ - ---- ---------

-- -------
-------------------- -- -
  -------------------- -- -
    ------------- -----------
  ---
---

现在,运行以下命令:

执行成功后,打开浏览器,打开 dist/index.html 文件即可看到效果。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac6719f

纠错
反馈