Webpack 是前端开发中常用的打包工具，它可以将项目中的多个 JavaScript 文件打包成一个或多个 JavaScript 文件，以及将其他资源（如 CSS、图片等）打包到同一个文件中，以减少 HTTP 请求。在开发过程中使用一个好的 Webpack 模板可以为我们节省很多时间。本教程将介绍一个方便易用的 Webpack 模板 @wilcho/webpack-boilerplate。
安装
你可以通过 npm 安装 @wilcho/webpack-boilerplate。
--- ------- ---------- ---------------------------
注意，该模板依赖于 Node.js 版本需要 >= 10 才能运行。
使用
该模板默认提供了两种运行模式：dev 和 build。
开发模式
运行以下命令启动模板的开发模式：
--- --- ---
该命令执行完毕后，将启动一个开发服务器。在浏览器中打开 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