Webpack 是前端开发中常用的打包工具,它可以将项目中的多个 JavaScript 文件打包成一个或多个 JavaScript 文件,以及将其他资源(如 CSS、图片等)打包到同一个文件中,以减少 HTTP 请求。在开发过程中使用一个好的 Webpack 模板可以为我们节省很多时间。本教程将介绍一个方便易用的 Webpack 模板 @wilcho/webpack-boilerplate。
安装
你可以通过 npm 安装 @wilcho/webpack-boilerplate。
npm install --save-dev @wilcho/webpack-boilerplate
注意,该模板依赖于 Node.js 版本需要 >= 10 才能运行。
使用
该模板默认提供了两种运行模式:dev
和 build
。
开发模式
运行以下命令启动模板的开发模式:
npm run dev
该命令执行完毕后,将启动一个开发服务器。在浏览器中打开 http://localhost:8080 页面,即可查看网页。在运行开发模式时,每当你修改你的代码时,都将会实时的在浏览器中更新。
生产模式
运行以下命令启动该模板的构建(打包)模式:
npm run build
该命令将会编译你的代码,将代码打包到合并的文件中,并优化最终的文件。
所有文件默认打包到 dist/
文件夹中。你可以在项目中新建此目录。
配置
如果你想进一步配置此模板,请编辑项目根目录下的 webpack.config.js
文件。其中有两个对象,分别对应开发模式和生产模式。你可以根据项目需求修改后保存。
-- -------------------- ---- ------- -- ------ ----- --------- - - -- --- -- - -- ------ ----- ----------- - - -- --- -- -
示例
这是一个简单的 HTML 文件,它使用了 Bootstrap 和 jQuery。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ------------ ----- ---------------- --------------------------------------------------------------------------------------- ------- ------ ---- ------------- ---------------- ----------- --------- -- -------------------- ------------------- ------- ---------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------ ----- ----------------------------------- --------- ---- --------------- ---------------- --------------- --- ------------------- --- --------------- -------- -- ---------------- ----------------- ----- --- ----------------- -- ---------------- --------------------- ----- --- ----------------- -- ---------------- -------------------- ----- --- ----------------- -- --------------- --------- --------------------- ----- ----- ------ ------ ---- ------------------ ---------- ------------- ------- -- -- ------- -- ------------ ------- ---------- ------------------ ----------- ------ ------- ---------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------- ------- -------
保存上述内容并将其保存为 index.html
文件。接着,在 webpack.config.js 文件中添加以下内容:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- -------- -- -------- - --- ------------------- --------- ------------- --- -- --
现在,我们还需要创建一个 JavaScript 文件来处理一些我们需要的东西。在项目根目录下创建一个名为 src
的文件夹,并在该文件夹中创建一个名为 index.js
的文件:
-- -------------------- ---- ------- -- -- --------- - ------ ------ ------------ ------ - ---- --------- -- ------- -------------------- -- - -------------------- -- - ------------- ----------- --- ---
现在,运行以下命令:
npm run build
执行成功后,打开浏览器,打开 dist/index.html
文件即可看到效果。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac6719f