随着前端技术的快速发展，不断涌现出各种新的框架和工具。而在这些工具之中，Webpack 已经成为了前端工程化的标配。Webpack 提供了强大的打包能力，支持多种类型文件的处理，具有高度的可定制性和可扩展性。而在今年，Webpack 更新至 4.0 版本，在保留已有特性的同时，进一步优化了打包性能，对插件系统进行了重构。本文将介绍如何基于 Webpack4.0 重构前端项目的打包配置，以及一些实用的技巧和指导意义。
环境搭建
首先，我们需要全局安装 Webpack4.0：
npm install -g webpack@4.x.x
在项目中安装 webpack 和 webpack-cli：
npm install webpack webpack-cli --save-dev
同时，需要安装一些必要的加载器和插件，例如：
- css-loader：解析 CSS
- sass-loader：解析 SCSS
- postcss-loader：处理 CSS 兼容性
- babel-loader：解析 ES6 语法
- html-webpack-plugin：生成 HTML 文件
- clean-webpack-plugin：清空输出目录
你可以根据项目需要，安装更多的加载器和插件。安装方式类似上述，都是通过 npm 进行安装。
配置文件
Webpack 使用的是基于 Node.js 的配置文件。在项目根目录下新建 webpack.config.js 文件，进行打包配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- -
---------------
-------------
-----------------
-------------
-
--
-
----- --------
-------- ---------------
------- --------------
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- --------------------
-
--其中，entry 为入口文件，output 为输出配置。module.rules 为加载器配置，用于处理不同类型的文件。plugins 为插件配置，用于扩展打包功能。以上只是一个简单的配置文件示例，后面我们将会介绍更多的配置方式和技巧。
在 package.json 中新增打包脚本：
"scripts": {
"build": "webpack"
}现在可以通过 npm run build 来进行打包操作。
加载器
Webpack 支持多种类型的文件加载器，其中比较常用的有以下几种。
CSS
Webpack 中的 CSS 处理是通过 css-loader 和 style-loader 来完成的。css-loader 可以解析 CSS 中的 @import 和 url()，并处理 CSS 中的文件依赖关系。style-loader 将 CSS 以 <style> 标签的形式插入到 HTML 文件中。我们需要在规则中将这两个加载器链接起来使用。</p> <pre class="prettyprint js">-- -------------------- ---- ------- ------- - ------ - - ----- --------- ---- - --------------- ------------ - - - -</pre><h3>SCSS</h3> <p>Webpack 支持 SCSS 的处理，需要用到 sass-loader。同时要注意，sass-loader 和 node-sass 是互相依赖的，需要同时安装：</p> <pre class="prettyprint login ">npm install sass-loader node-sass --save-dev</pre><p>此外，我们还可以为 SCSS 处理增加 PostCSS 的兼容性处理：</p> <pre class="prettyprint js">-- -------------------- ---- ------- ------- - ------ - - ----- ---------- ---- - --------------- ------------- ----------------- ------------- - - - -</pre><h3>图片和字体</h3> <p>Webpack 支持多种类型的图片和字体文件处理，通常需要用到 file-loader 和 url-loader。</p> <pre class="prettyprint js">-- -------------------- ---- ------- ------- - ------ - - ----- -------------------------------- ------- ------------- -------- - ------ ----- ----- ------------------ - -- - ----- --------------------------------- ------- -------------- -------- - ----- -------------------- - - - -</pre><p>其中，url-loader 会将图片文件编码为 base64，减少请求次数。limit 为图片的转换阈值。当图片大小小于 limit 时，会被转换为 base64。name 为图片文件输出路径。</p> <p>file-loader 用于处理字体文件，可以直接复制到输出目录中。name 为字体文件输出路径。</p> <h3>ES6</h3> <p>Webpack 默认只能处理 CommonJS 的模块导入方式，而无法处理 ES6 的 import/export。需要用到 babel-loader 进行转换。</p> <p>在项目中安装 babel-loader 和相关插件：</p> <pre class="prettyprint login ">npm install babel-loader @babel/core @babel/preset-env --save-dev</pre><p>在配置文件中增加规则：</p> <pre class="prettyprint js">-- -------------------- ---- ------- ------- - ------ - - ----- -------- -------- --------------- ------- -------------- - - -</pre><p>同时，需要新增一个 .babelrc 配置文件，用于指定转换格式：</p> <pre class="prettyprint json">-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- ------ -------------- -------- --------- --- - - - -</pre><p>此处使用了 @babel/preset-env 插件，可以自动将 ES6 转换为 ES5，并处理浏览器兼容性。useBuiltIns 和 corejs 配置用于 polyfill 的处理，可以将需要的 polyfill 按需引入，减小打包体积。</p> <h2>插件</h2> <p>Webpack 的插件是其最为强大的特性之一，可以为打包过程增加各种扩展功能。</p> <h3>HTMLWebpackPlugin</h3> <p>HTMLWebpackPlugin 插件可以将打包后的 JS 文件自动插入到 HTML 文件中，生成新的 HTML 文件并输出到指定目录。该插件还支持多种参数配置，可以自定义 HTML 文件模板、生成文件名等。</p> <p>首先需要安装该插件：</p> <pre class="prettyprint login ">npm install html-webpack-plugin --save-dev</pre><p>在配置文件中引入插件：</p> <pre class="prettyprint login js">const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }) ]</pre><p>其中，template 为 HTML 文件模板路径。</p> <h3>CleanWebpackPlugin</h3> <p>CleanWebpackPlugin 插件可以自动清空指定目录的文件。在每次打包之前，该插件会自动执行一次清空操作，保证输出目录的干净和整洁。</p> <p>安装方式：</p> <pre class="prettyprint login ">npm install clean-webpack-plugin --save-dev</pre><p>在配置文件中引入插件：</p> <pre class="prettyprint login js">const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin() ]</pre><h3>其他插件</h3> <p>Webpack 还有许多实用的插件，例如：</p> <ul> <li>MiniCssExtractPlugin：将 CSS 代码提取为独立的文件</li> <li>UglifyJsPlugin：压缩 JS 代码</li> <li>OptimizeCSSAssetsPlugin：压缩 CSS 代码</li> </ul> <p>你可以根据项目的需要，选择使用对应的插件。</p> <h2>打包优化</h2> <p>Webpack4.0 在打包性能上进行了明显的优化，但是在处理大规模项目时，仍然需要进行一些优化工作。</p> <h3>配置参数</h3> <p>在配置文件中，有一些参数可以用于优化打包性能。</p> <ul> <li>mode：指定打包模式，可以为 development 或 production。development 模式下，Webpack 会分析代码结构，使用优化后的代码，提高编译速度；production 模式下，Webpack 会启用更多的代码优化，生成较小的输出文件。默认为 production。</li> <li>devtool：用于生成 Sourcemap，方便调试和定位错误。可以选择 source-map、eval-source-map 或 cheap-module-eval-source-map 等。</li> <li>output：可以在 output 中设定一些参数，例如 library、libraryTarget 等。</li> </ul> <h3>多入口打包</h3> <p>当项目中存在多个入口时，可以使用多入口打包的方式，减少重复打包的步骤。</p> <pre class="prettyprint js">-- -------------------- ---- ------- -------------- - - ------ - ----- ---------------- ------ ---------------- -- ------- - ----- ----------------------- -------- --------- ----------- - --</pre><h3>懒加载</h3> <p>Webpack 支持通过 import() 实现动态加载，也就是所谓的懒加载。这种方式避免了在初始化时加载所有代码，而是在需要的时候才进行代码加载。这种方式可以减少首屏加载时间，并提升用户体验。</p> <pre class="prettyprint login js">import('./module').then(module => { // do something });</pre><h3>Shimming</h3> <p>在某些情况下，第三方库的代码可能无法和 Webpack 的打包方式兼容。Shimming 可以帮助我们在打包时进行库的重新配合，使其与 Webpack 打包的代码关联，并在打包后的代码中完美运行。</p> <p>Webpack4.0 使用了自带的 polyfill 方法，可以轻松解决大部分 polyfill 的问题。但是在某些情况下，我们仍然需要手动配置 Shimming。</p> <pre class="prettyprint js">-- -------------------- ---- ------- -------------- - - ------- - ------ - -- -------------- - ----- --------------------------- ---- -- ------- ----------------- -------- ------- -------- -- - - - --</pre><p>需要注意的是，引入 Shimming 会带来一定的性能损耗，可能会导致打包时间延长，因此需要根据项目实际需要进行权衡。</p> <h2>总结</h2> <p>Webpack4.0 作为前端工程化的重要工具，提供了强大的打包功能和扩展性。本文介绍了如何搭建 Webpack4.0 的开发环境、常用的加载器和插件、打包优化的方法和 Shimming 的使用方法等。希望本文对你有所帮助，同时也欢迎大家分享更多实用的 Webpack 技巧和经验。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/653299c47d4982a6eb560fa9">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/653299c47d4982a6eb560fa9">https://www.javascriptcn.com/post/653299c47d4982a6eb560fa9</a></p> </blockquote>