大家好，今天咱们来聊聊 Vue CLI 里的 Webpack 魔术！
嘿，各位前端的魔法师们，今天咱们不聊哈利波特，聊聊 Vue CLI 藏着的 Webpack 魔法棒！ 大家都知道，Vue CLI 这玩意儿好用，项目搭建嗖嗖的，但是你有没有想过，如果它生成的默认配置不能满足你的特殊需求，怎么办？ 别慌，Vue CLI 早就给你准备好了两把刷子：chainWebpack 和 configureWebpack！
今天咱们就来深挖一下这两把刷子，看看它们到底是怎么让你玩转 Webpack 配置的，以及这背后到底藏着啥样的技术原理。
一、Webpack 是个啥？ 为什么要定制它？
在深入 Vue CLI 之前，咱们先得简单聊聊 Webpack。 你可以把 Webpack 想象成一个打包行李的能手。 你的项目里有各种各样的文件：JavaScript、CSS、图片、字体等等。 Webpack 会把这些文件，按照你指定的规则，打包成浏览器可以识别的格式，比如 JavaScript bundle、CSS 文件等等。
那为什么要定制 Webpack 配置呢？ 理由可多了去了：
- 优化性能： 想让你的网站加载更快？ 可以通过 Webpack 配置来压缩代码、分割代码、使用缓存等等。
- 扩展功能： 想用一些炫酷的 loader 或者 plugin？ 比如处理 Markdown 文件、自动生成 HTML 页面等等。
- 兼容性： 想支持一些老旧的浏览器？ 可以通过 Webpack 配置来转换代码，使其兼容旧版本浏览器。
- 个性化需求： 比如你想修改输出文件的目录结构，或者添加一些自定义的构建流程。
总之，Webpack 配置就是你控制打包过程的钥匙，定制 Webpack 配置就是让你能够更好地掌控你的项目。
二、Vue CLI 的 Webpack 默认配置： 方便，但不够灵活
Vue CLI 为了方便大家，已经预先配置好了一套 Webpack 配置。 这套配置对于大多数项目来说，已经够用了。 但是，总有一些时候，你需要对它进行一些修改。
Vue CLI 提供了两种方式来定制 Webpack 配置：
chainWebpack： 链式操作，更细粒度的控制。configureWebpack： 直接修改，更简单粗暴。
咱们先来聊聊 chainWebpack。
三、chainWebpack： 像搭积木一样修改 Webpack 配置
chainWebpack 允许你以链式调用的方式，修改 Webpack 的配置。 就像搭积木一样，你可以一块一块地添加、修改、删除 Webpack 的配置项。
用法示例：
在你的 vue.config.js 文件中，添加 chainWebpack 选项：
// vue.config.js
module.exports = {
chainWebpack: config => {
// 修改 webpack 配置
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改 vue-loader 的选项
options.compilerOptions = {
...options.compilerOptions,
whitespace: 'condense' // 删除多余的空格
}
return options
})
}
}代码解释：
config对象： 这是chainWebpack接收到的参数，它是一个 webpack-chain 对象。webpack-chain是一个链式操作 Webpack 配置的工具。config.module.rule('vue')： 找到名为 ‘vue’ 的 module rule。module rule 定义了如何处理特定类型的文件。.use('vue-loader')： 找到使用vue-loader的 loader。.loader('vue-loader')：再次指定loader，链式调用需要。.tap(options => { ... })： 使用tap方法修改vue-loader的选项。tap方法接收一个函数，该函数接收当前的选项，并返回修改后的选项。options.compilerOptions = { ...options.compilerOptions, whitespace: 'condense' }： 修改vue-loader的compilerOptions选项，将whitespace设置为'condense'，这样可以删除 Vue 模板中的多余空格，减少打包体积。
webpack-chain 的优势：
- 链式调用： 代码更简洁、易读。
- 类型安全：
webpack-chain使用 TypeScript 编写，可以提供类型提示和自动补全，减少出错的概率。 - 可维护性：
webpack-chain将 Webpack 配置拆分成一个个小的模块，更易于维护和修改。 - 查找方便： 能直接定位到某个loader，plugin，进行修改。
chainWebpack 的常用操作：
| 操作 | 描述 | 示例 | ||
|---|---|---|---|---|
config.module.rule() |
添加/修改 module rule。 module rule 定义了如何处理特定类型的文件，比如 JavaScript、CSS、图片等等。 可以通过 test 属性指定匹配的文件类型，通过 use 属性指定使用的 loader。 |
“`javascript config.module .rule(‘images’) .test(/.(png | jpe?g | gif)$/) .use(‘url-loader’) .loader(‘url-loader’) .options({ limit: 10240 }) // 小于 10KB 的图片转为 base64 |
config.plugin() |
添加/修改 plugin。 plugin 可以扩展 Webpack 的功能，比如生成 HTML 页面、压缩代码等等。 可以通过 use 方法指定使用的 plugin，并通过 options 属性传递选项。 |
“`javascript config.plugin(‘html’) .use(require(‘html-webpack-plugin’), [{ template: ‘./public/index.html’ }]) // 使用 html-webpack-plugin 生成 HTML 页面 | ||
config.resolve.alias |
配置模块的别名。 可以让你在代码中用更短的路径引用模块。 比如你可以将 @ 别名指向 src 目录，然后在代码中就可以用 @/components/MyComponent 引用组件。 |
“`javascript config.resolve.alias .set(‘@’, resolve(‘src’)) // 将 @ 别名指向 src 目录 | ||
config.optimization |
配置代码优化选项。 比如你可以配置代码分割、压缩代码等等。 | “`javascript config.optimization.splitChunks({ chunks: ‘all’ }) // 分割代码 | ||
config.devServer |
配置开发服务器选项。 比如你可以配置端口号、代理等等。 | “`javascript config.devServer.proxy({ ‘/api’: { target: ‘http://localhost:3000‘ } }) // 将 /api 请求代理到 http://localhost:3000 |
webpack-chain 的底层原理：
webpack-chain 实际上是对 Webpack 配置对象的一个抽象。 它将 Webpack 配置对象转换成一个链式调用的 API，让你能够更方便地修改配置。
webpack-chain 内部维护着一个配置对象，当你调用链式 API 时，它会修改这个配置对象。 最后，当你调用 toConfig() 方法时，它会将这个配置对象转换成一个标准的 Webpack 配置对象。
所以，chainWebpack 就像一个中间层，它让你能够以更友好的方式操作 Webpack 配置对象，而不用直接修改原始的配置对象。
四、configureWebpack： 像写 JSON 一样修改 Webpack 配置
configureWebpack 允许你直接修改 Webpack 的配置对象。 就像写 JSON 一样，你可以直接添加、修改、删除 Webpack 的配置项。
用法示例：
在你的 vue.config.js 文件中，添加 configureWebpack 选项：
// vue.config.js
module.exports = {
configureWebpack: {
// 修改 webpack 配置
resolve: {
alias: {
'@': resolve('src') // 将 @ 别名指向 src 目录
}
},
plugins: [
new webpack.IgnorePlugin(/^./locale$/, /moment$/) // 忽略 moment 的 locale 文件
]
}
}代码解释：
configureWebpack可以接收一个对象或者一个函数。- 如果接收的是一个对象，那么这个对象会被合并到 Webpack 的配置对象中。
- 如果接收的是一个函数，那么这个函数接收当前的 Webpack 配置对象作为参数，你可以直接修改这个配置对象。
高级用法：
// 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语句，减少打包体积。
configureWebpack 的优势：
- 简单直接： 直接修改 Webpack 配置对象，更简单粗暴。
- 灵活： 可以根据不同的环境，修改不同的配置。
configureWebpack 的缺点：
- 类型不安全： 直接修改 Webpack 配置对象，没有类型提示和自动补全，容易出错。
- 可维护性差： 直接修改 Webpack 配置对象，代码更难维护和修改。
- 覆盖： 容易覆盖默认配置，导致一些意想不到的问题。
configureWebpack 的底层原理：
configureWebpack 其实就是将你提供的配置对象或者函数，应用到 Vue CLI 内部的 Webpack 配置对象上。
如果 configureWebpack 接收的是一个对象，Vue CLI 会使用 webpack-merge 将这个对象合并到 Webpack 配置对象中。
如果 configureWebpack 接收的是一个函数，Vue CLI 会将 Webpack 配置对象作为参数传递给这个函数，让你直接修改这个配置对象。
所以，configureWebpack 就像一个补丁，它让你能够直接修改 Webpack 配置对象，而不用关心 Vue CLI 内部的实现细节。
五、chainWebpack vs configureWebpack： 选哪个？
既然 Vue CLI 提供了两种方式来定制 Webpack 配置，那么我们应该选择哪一个呢？
| 特性 | chainWebpack |
configureWebpack |
|---|---|---|
| 优点 | 链式调用，代码更简洁、易读。 类型安全，提供类型提示和自动补全。 可维护性好，将 Webpack 配置拆分成小的模块。 不容易覆盖默认配置。 | 简单直接，直接修改 Webpack 配置对象。 灵活，可以根据不同的环境修改配置。 |
| 缺点 | 学习成本较高，需要了解 webpack-chain 的 API。 对于一些复杂的配置，可能需要编写更多的代码。 |
类型不安全，没有类型提示和自动补全。 可维护性差，代码更难维护和修改。 * 容易覆盖默认配置，导致一些意想不到的问题。 |
| 适用场景 | 需要对 Webpack 配置进行细粒度的控制。 需要保证代码的类型安全和可维护性。 * 需要添加/修改 loader 或者 plugin 的选项。 | 只需要对 Webpack 配置进行简单的修改。 需要根据不同的环境修改不同的配置。 * 需要添加一些自定义的构建流程。 |
| 推荐程度 | 推荐 | 不推荐 (除非你非常清楚自己在做什么) |
总的来说，chainWebpack 更加安全、可维护，但是学习成本也更高。 configureWebpack 更加简单直接，但是容易出错。
我的建议是： 尽量使用 chainWebpack，除非你非常清楚自己在做什么，并且需要进行一些非常简单的修改，否则不要使用 configureWebpack。
六、实战演练： 用 chainWebpack 和 configureWebpack 做点啥
光说不练假把式，咱们来几个实际的例子，看看怎么用 chainWebpack 和 configureWebpack 来解决实际问题。
例子 1： 使用 chainWebpack 添加 SVG Sprite Loader
有时候我们需要使用 SVG Sprite 来优化 SVG 图片的加载性能。 我们可以使用 chainWebpack 来添加 svg-sprite-loader。
// vue.config.js
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons')) // 排除 src/icons 目录下的 svg 文件
.end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('src/icons')) // 只处理 src/icons 目录下的 svg 文件
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]' // 设置 symbolId 的格式
})
.end()
}
}代码解释：
- 首先，我们需要排除
src/icons目录下的 svg 文件，因为这些文件将被svg-sprite-loader处理。 - 然后，我们添加一个名为
icons的 module rule，只处理src/icons目录下的 svg 文件。 - 接着，我们使用
svg-sprite-loader来处理这些 svg 文件，并设置symbolId的格式。
例子 2： 使用 configureWebpack 添加 CDN 加速
有时候我们需要使用 CDN 来加速静态资源的加载。 我们可以使用 configureWebpack 来添加 html-webpack-plugin，并将静态资源的 URL 修改为 CDN 地址。
// vue.config.js
module.exports = {
configureWebpack: config => {
config.plugins.push(
new HtmlWebpackPlugin({
template: 'public/index.html',
cdn: {
css: [
'https://cdn.example.com/style.css'
],
js: [
'https://cdn.example.com/vue.js'
]
}
})
)
}
}代码解释：
- 我们使用
configureWebpack添加html-webpack-plugin。 - 我们在
html-webpack-plugin的选项中，添加cdn属性，指定 CSS 和 JavaScript 文件的 CDN 地址。
注意： 这只是一个简单的例子，实际使用中，你可能需要根据你的实际情况，修改 CDN 地址和文件路径。
七、Webpack 配置的调试技巧
修改 Webpack 配置是一件比较复杂的事情，很容易出错。 这里有一些调试技巧，可以帮助你更好地调试 Webpack 配置。
- 使用
vue inspect命令：vue inspect命令可以让你查看 Vue CLI 内部的 Webpack 配置。 你可以使用vue inspect > webpack.config.js命令将 Webpack 配置导出到一个文件中，然后仔细研究这个文件。 - 使用
console.log： 在chainWebpack和configureWebpack中，你可以使用console.log来打印 Webpack 配置对象，查看你的修改是否生效。 - 使用 Webpack 的
--debug选项： 在运行vue-cli-service build命令时，你可以添加--debug选项，这样 Webpack 会输出更详细的调试信息。 - 查看 Webpack 的官方文档： Webpack 的官方文档非常详细，包含了各种配置选项的说明。 如果你遇到问题，可以查阅 Webpack 的官方文档。
八、总结： Webpack 魔法，尽在掌握
今天我们一起深入了解了 Vue CLI 提供的 chainWebpack 和 configureWebpack 这两把刷子，学习了如何使用它们来定制 Webpack 配置。
希望通过今天的学习，你能够更好地掌控你的项目，让你的网站更加快速、高效。
记住，Webpack 配置是一门艺术，需要不断地学习和实践。 祝你在前端的道路上越走越远！
各位，咱们下次再见！