Vue CLI Webpack 配置定制：ChainWebpack 与 ConfigureWebpack 讲座
各位观众老爷，大家好！我是今天的主讲人，江湖人称“Webpack 救星”（其实是加班太多被迫研究的）。今天我们要聊聊 Vue CLI 提供的两大利器：chainWebpack 和 configureWebpack，它们是如何让我们可以像开盲盒一样，定制 Webpack 配置，打造属于你自己的专属打包流程。
首先，我们得明白，Vue CLI 已经帮我们配置好了一套默认的 Webpack 配置，开箱即用，但总有一些时候，我们需要打破常规，做出一些个性化的调整。这时候，chainWebpack 和 configureWebpack 就闪亮登场了。
一、为何需要定制 Webpack？
在深入探讨 chainWebpack 和 configureWebpack 之前，我们先来简单聊聊为什么要定制 Webpack 配置。毕竟，如果默认配置能满足所有需求，那我们也不用这么折腾了，对吧？
以下是一些常见的需要定制 Webpack 的场景：
- 优化构建性能： 默认配置可能不是针对你的项目进行优化的，例如，你可以通过配置来减少打包体积、提升构建速度等。
- 集成第三方库： 有些第三方库可能需要特定的 Webpack 配置才能正常工作，例如，一些需要自定义 Loader 的库。
- 支持新特性： 想要使用一些实验性的 JavaScript 特性，或者一些新的 CSS 预处理器，可能需要手动配置 Webpack。
- 个性化需求： 比如你想把静态资源放到 CDN 上，或者你想自定义输出目录的结构等等。
总之，定制 Webpack 配置是为了让我们的项目更好地运行，更高效地构建，更符合我们的需求。
二、chainWebpack：链式操作，优雅修改
chainWebpack 提供了一种更精细、更优雅的方式来修改 Webpack 配置。它允许我们通过一个链式 API 来访问和修改 Webpack 配置的各个方面，而无需直接操作原始的配置对象。
2.1 基本用法
在 vue.config.js 文件中，我们可以这样使用 chainWebpack：
// vue.config.js
module.exports = {
chainWebpack: config => {
// 修改配置...
}
};这里的 config 对象是一个 webpack-chain 的实例，它提供了一系列的链式 API 来操作 Webpack 配置。
2.2 核心概念：webpack-chain
webpack-chain 库是 chainWebpack 的基石。它提供了一套链式 API，让我们能够以更加声明式的方式来修改 Webpack 配置。使用 webpack-chain 的好处在于：
- 可读性强： 链式 API 使得配置更加易于阅读和理解。
- 类型安全：
webpack-chain提供了类型定义，可以帮助我们避免一些常见的配置错误。 - 易于维护： 当 Webpack 版本升级时，
webpack-chain可以帮助我们更容易地迁移配置。
2.3 常用 API 举例
让我们来看一些 chainWebpack 中常用的 API 示例：
- 修改 Loader 配置：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改 vue-loader 的选项
options.compilerOptions = {
whitespace: 'condense' // 压缩空白字符
};
return options;
});
}
};这段代码修改了 vue-loader 的配置，通过 tap 方法可以访问到 Loader 的选项，并进行修改。
- 添加新的 Loader：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.test(/.svg$/)
.use('file-loader')
.loader('file-loader');
}
};这段代码添加了一个新的 Loader，用于处理 SVG 文件。
- 修改 Plugin 配置：
// vue.config.js
const webpack = require('webpack');
module.exports = {
chainWebpack: config => {
config
.plugin('define')
.use(webpack.DefinePlugin, [{
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}]);
}
};这段代码修改了 DefinePlugin 的配置，use 方法接收两个参数：Plugin 的构造函数和构造函数的参数。
- 删除 Plugin：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch'); // 删除 prefetch 插件
}
};这段代码删除了 prefetch 插件。
- 设置别名：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('@', resolve('src')); // 设置 @ 别名
}
};这段代码设置了 @ 别名，指向 src 目录。
2.4 chainWebpack 的底层原理
chainWebpack 的底层原理其实并不复杂。它本质上是利用 webpack-chain 库，构建了一个 Webpack 配置的抽象层。这个抽象层允许我们通过链式 API 来修改配置，而无需直接操作原始的 Webpack 配置对象。
当我们使用 chainWebpack 修改配置时，webpack-chain 会将我们的修改转换成一系列的操作指令。然后，在 Webpack 构建之前，Vue CLI 会执行这些操作指令，将它们应用到原始的 Webpack 配置对象上。
三、configureWebpack：灵活配置，直接操作
configureWebpack 提供了另一种定制 Webpack 配置的方式。它允许我们直接操作原始的 Webpack 配置对象，或者返回一个包含配置选项的对象。相比于 chainWebpack，configureWebpack 更加灵活，但也意味着我们需要更加了解 Webpack 的配置结构。
3.1 基本用法
在 vue.config.js 文件中，我们可以这样使用 configureWebpack：
// vue.config.js
module.exports = {
configureWebpack: {
// 修改配置...
}
};
// 或者
module.exports = {
configureWebpack: (config) => {
// 修改配置...
}
};configureWebpack 可以接收一个对象或一个函数作为参数。如果传入的是一个对象，那么这个对象会被合并到最终的 Webpack 配置中。如果传入的是一个函数，那么这个函数会接收原始的 Webpack 配置对象作为参数，我们可以在函数中直接修改这个对象。
3.2 常用用法举例
- 添加 Plugin：
// vue.config.js
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin(/^./locale$/, /moment$/) // 忽略 moment 的 locale 文件
]
}
};这段代码添加了一个 IgnorePlugin，用于忽略 moment 的 locale 文件，以减少打包体积。
- 修改 output 配置：
// vue.config.js
module.exports = {
configureWebpack: {
output: {
filename: '[name].[hash].js', // 修改输出文件名
publicPath: '/static/' // 修改 publicPath
}
}
};这段代码修改了 output 配置，包括输出文件名和 publicPath。
- 使用函数形式：
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 生产环境
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 去除 console.log
} else {
// 开发环境
// ...
}
}
};这段代码使用函数形式，根据不同的环境来修改 Webpack 配置。在生产环境下，它会去除 console.log 语句。
3.3 configureWebpack 的底层原理
configureWebpack 的底层原理相对简单。如果 configureWebpack 传入的是一个对象，那么 Vue CLI 会使用 webpack-merge 库，将这个对象合并到原始的 Webpack 配置中。如果 configureWebpack 传入的是一个函数，那么 Vue CLI 会直接调用这个函数，并将原始的 Webpack 配置对象作为参数传递给它。
四、chainWebpack vs configureWebpack：如何选择？
chainWebpack 和 configureWebpack 都是用于定制 Webpack 配置的，但它们的使用场景和适用性有所不同。那么，我们应该如何选择呢？
| 特性 | chainWebpack |
configureWebpack |
|---|---|---|
| 修改方式 | 链式 API，声明式修改 | 直接操作对象，命令式修改 |
| 灵活性 | 较低 | 较高 |
| 可读性 | 较好 | 较差 |
| 易维护性 | 较好，Webpack 版本升级影响较小 | 较差，Webpack 版本升级可能导致配置失效 |
| 适用场景 | 修改已有的 Loader、Plugin 配置，添加新的 Loader | 需要进行复杂的配置修改，或者需要直接访问 Webpack 对象 |
总的来说：
- 推荐使用
chainWebpack： 如果你的目标是修改已有的 Loader、Plugin 配置，或者添加新的 Loader，那么chainWebpack是更好的选择。它提供了更加清晰、易于维护的方式来修改配置。 - 谨慎使用
configureWebpack： 只有当你需要进行非常复杂的配置修改，或者需要直接访问 Webpack 对象时，才应该考虑使用configureWebpack。在使用configureWebpack时，需要对 Webpack 的配置结构有深入的了解，并且要小心处理 Webpack 版本升级带来的影响。
五、实战演练：优化构建性能
为了更好地理解 chainWebpack 和 configureWebpack 的使用，我们来做一个实战演练：优化构建性能。
5.1 使用 webpack-bundle-analyzer 分析打包体积
首先，我们需要安装 webpack-bundle-analyzer 插件：
npm install --save-dev webpack-bundle-analyzer然后，在 vue.config.js 中配置 webpack-bundle-analyzer：
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
};运行 npm run build 命令，webpack-bundle-analyzer 会自动打开一个网页，显示各个模块的打包体积。通过分析打包体积，我们可以找到需要优化的模块。
5.2 使用 externals 减少打包体积
如果你的项目使用了大量的第三方库，那么可以考虑使用 externals 配置，将这些库排除在打包范围之外，从而减少打包体积。
例如，如果你的项目使用了 lodash 库，你可以这样配置：
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
lodash: 'lodash'
}
}
};然后在 HTML 文件中，通过 CDN 引入 lodash 库：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>5.3 使用 terser-webpack-plugin 压缩代码
terser-webpack-plugin 是一个用于压缩 JavaScript 代码的 Webpack 插件。Vue CLI 已经默认集成了 terser-webpack-plugin，我们只需要修改它的配置即可。
// vue.config.js
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 去除 console.log
}
}
};这段代码在生产环境下，去除了 console.log 语句。
5.4 使用 compression-webpack-plugin 压缩静态资源
compression-webpack-plugin 可以将静态资源压缩成 Gzip 或 Brotli 格式，以减少文件大小，提升加载速度。
首先，我们需要安装 compression-webpack-plugin 插件：
npm install --save-dev compression-webpack-plugin然后，在 vue.config.js 中配置 compression-webpack-plugin：
// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip', // 使用 gzip 压缩
test: /.(js|css|html|svg)$/, // 匹配需要压缩的文件
threshold: 10240, // 超过 10kb 的文件才压缩
minRatio: 0.8, // 压缩比例超过 0.8 才压缩
deleteOriginalAssets: false // 是否删除原始资源
})
]
}
};六、总结
今天我们深入探讨了 Vue CLI 提供的 chainWebpack 和 configureWebpack 两种 Webpack 配置定制方式。chainWebpack 提供了链式 API，更加优雅和易于维护；configureWebpack 更加灵活，但需要对 Webpack 配置有深入的了解。在实际开发中，我们可以根据具体的需求选择合适的配置方式。
希望通过今天的讲座，大家能够更加自信地定制 Webpack 配置，打造出更加高效、更加个性化的 Vue 项目！
最后，记住一句至理名言：“Webpack 配置，三分靠学习，七分靠瞎蒙！” （开玩笑的，还是要认真学习的！）
谢谢大家！