如何通过 Vue CLI 进行 Webpack 配置的定制和优化，例如添加自定义 Loader 和 Plugin？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue CLI Webpack 配置定制与优化：让你的项目飞起来！

各位靓仔靓女们，大家好！我是今天的主讲人，人称“代码界的段子手”的张三。今天咱们不聊妹子，不聊八卦，就聊聊怎么把咱们的 Vue 项目搞得更快、更强、更秀！

相信大家用 Vue CLI 创建项目的时候都觉得这玩意儿真香，开箱即用，省了不少事儿。但是，时间长了，你可能就会发现，自带的配置好像不太够用，想要加点料，搞点个性化定制，怎么办呢？别慌！今天我就来教大家怎么玩转 Vue CLI 的 Webpack 配置，让你的项目像火箭一样嗖嗖嗖！

一、Vue CLI 与 Webpack 的爱恨情仇

首先，咱们得搞清楚 Vue CLI 和 Webpack 之间的关系。简单来说，Vue CLI 是一个工具，它帮你把 Webpack 这个复杂的家伙给封装起来了，让你不用直接面对那些繁琐的配置。但是，这并不意味着你就不能碰 Webpack 了！Vue CLI 提供了几种方式让你能够定制 Webpack 的配置，就像给你留了几个后门，让你能够偷偷地给 Webpack 加点料。

二、定制 Webpack 配置的几种姿势

Vue CLI 提供了三种主要的姿势来定制 Webpack 配置：

vue.config.js： 这是最常用，也是最推荐的方式。你可以在项目的根目录下创建一个 vue.config.js 文件，在这个文件里修改 Webpack 的配置。
chainWebpack： 这个选项允许你使用 webpack-chain 这个库来更加细粒度地修改 Webpack 的配置。它可以让你像链式调用一样，修改 Webpack 的各个环节。
configureWebpack： 这个选项允许你直接修改 Webpack 的配置对象。你可以传入一个对象，它会被合并到 Webpack 的配置中；或者传入一个函数，这个函数会接收 Webpack 的配置对象作为参数，然后你可以直接修改它。

这三种姿势，就像是炒菜时放调料的三种方式：

vue.config.js：就像是提前把调料都配好，一股脑倒进锅里。
chainWebpack：就像是厨师拿着调料瓶，一点一点地往锅里加，精细调味。
configureWebpack：就像是直接把锅端起来，往里面加东西，简单粗暴。

三、`vue.config.js`：最友好的姿势

vue.config.js 是最常用的方式，因为它简单易懂，而且 Vue CLI 官方也推荐使用这种方式。下面咱们就来看看怎么用 vue.config.js 来添加自定义的 Loader 和 Plugin。

1. 添加自定义 Loader

假设咱们想要添加一个 markdown-loader，让咱们可以在 Vue 组件里直接引入 Markdown 文件。首先，你需要安装这个 Loader：

npm install markdown-loader --save-dev

然后，在 vue.config.js 里配置：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('markdown')
      .test(/.md$/)
      .use('vue-loader')
        .loader('vue-loader')
        .end()
      .use('markdown-loader')
        .loader('markdown-loader')
        .end()
  }
}

这段代码的意思是：

找到 Webpack 的 module.rules 配置。
添加一个新的规则，这个规则匹配所有的 .md 文件。
使用 markdown-loader 来处理这些文件。先使用vue-loader处理，再使用markdown-loader处理，顺序很重要。

现在，你就可以在 Vue 组件里这样引入 Markdown 文件了：

<template>
  <div v-html="markdownContent"></div>
</template>

<script>
import markdownContent from './README.md';

export default {
  data() {
    return {
      markdownContent
    };
  }
};
</script>

2. 添加自定义 Plugin

假设咱们想要添加一个 webpack-bundle-analyzer 插件，用来分析咱们的打包文件，看看哪些模块太大了，需要优化。首先，你需要安装这个插件：

npm install webpack-bundle-analyzer --save-dev

然后，在 vue.config.js 里配置：

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

这段代码的意思是：

引入 webpack-bundle-analyzer 插件。
在 Webpack 的 plugins 配置里添加这个插件。

运行 npm run build 之后，你就会看到一个网页，上面展示了你的打包文件的各个模块的大小和依赖关系，简直一目了然！

3. 更多 `vue.config.js` 的配置选项

vue.config.js 还有很多其他的配置选项，比如：

publicPath：设置项目的根路径。
outputDir：设置打包文件的输出目录。
assetsDir：设置静态资源的输出目录。
devServer：配置开发服务器。
css：配置 CSS 相关的东西，比如 CSS Modules、PostCSS 等等。
transpileDependencies：指定需要 Babel 转译的依赖包。

这些选项可以让你更加灵活地配置你的项目，满足各种各样的需求。

四、`chainWebpack`：精细调味的姿势

chainWebpack 允许你使用 webpack-chain 这个库来更加细粒度地修改 Webpack 的配置。webpack-chain 提供了一套链式调用的 API，让你能够像流水线一样，一步一步地修改 Webpack 的配置。

例如，咱们想要修改 vue-loader 的配置，让它支持 Prettier 代码格式化：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.prettify = true;
          return options;
        })
  }
}

这段代码的意思是：

找到 Webpack 中处理 .vue 文件的 rule。
找到这个 rule 中使用的 vue-loader。
使用 tap 方法来修改 vue-loader 的 options。
将 prettify 选项设置为 true。

chainWebpack 的好处是，它能够让你更加精准地控制 Webpack 的配置，避免不必要的修改。但是，它也需要你对 Webpack 的配置有更深入的了解。

五、`configureWebpack`：简单粗暴的姿势

configureWebpack 允许你直接修改 Webpack 的配置对象。你可以传入一个对象，它会被合并到 Webpack 的配置中；或者传入一个函数，这个函数会接收 Webpack 的配置对象作为参数，然后你可以直接修改它。

例如，咱们想要添加一个 resolve.alias 配置，让咱们可以使用 @ 符号来引用 src 目录：

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

或者，你也可以使用函数的方式：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
  }
}

configureWebpack 的好处是，它简单直接，可以让你快速地修改 Webpack 的配置。但是，它也容易出错，因为你需要对 Webpack 的配置对象有足够的了解。

六、Webpack 配置优化的几个小技巧

除了添加自定义的 Loader 和 Plugin 之外，咱们还可以通过一些小技巧来优化 Webpack 的配置，让咱们的项目跑得更快。

使用 productionSourceMap: false： 在生产环境下，咱们通常不需要 Source Map，因为它们会暴露咱们的源代码，而且会增加打包文件的大小。所以，咱们可以把 productionSourceMap 设置为 false，禁用 Source Map。
```
// vue.config.js
module.exports = {
  productionSourceMap: false
}
```
使用 optimization.splitChunks： splitChunks 可以将咱们的代码分割成多个 chunk，让浏览器可以并行加载这些 chunk，从而提高加载速度。
```
// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}
```
使用 webpack-bundle-analyzer 分析打包文件： 使用 webpack-bundle-analyzer 可以帮助咱们找到那些体积过大的模块，然后咱们可以针对这些模块进行优化，比如使用代码分割、懒加载等等。
图片压缩： 压缩图片可以有效减小打包体积，可以使用image-webpack-loader等loader。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: [0.65, 0.90],
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          },
          webp: {
            quality: 75
          }
        })
  }
}

开启Gzip压缩： 使用compression-webpack-plugin对静态资源进行Gzip压缩，可以减少文件传输大小。

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /.(js|css|html|svg)(?.*)?$/i,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 是否删除原文件
      })
    ]
  }
}

使用CDN： 将一些不经常更新的静态资源，如第三方库，放到CDN上，可以减少服务器的压力，提高加载速度。

七、常见问题及解决方案

问题	解决方案
修改 `vue.config.js` 后没有生效	1. 确认 `vue.config.js` 文件是否在项目的根目录下。 2. 重启 `vue-cli-service serve` 或 `vue-cli-service build` 命令。 3. 检查 `vue.config.js` 文件是否有语法错误。
添加的 Loader 或 Plugin 报错	1. 确认 Loader 或 Plugin 是否正确安装。 2. 检查 Loader 或 Plugin 的配置是否正确。 3. 查看 Webpack 的错误信息，根据错误信息进行调试。
打包文件体积过大	1. 使用 `webpack-bundle-analyzer` 分析打包文件，找到体积过大的模块。 2. 对体积过大的模块进行优化，比如使用代码分割、懒加载等等。 3. 开启 Gzip 压缩。 4. 使用 CDN。
如何调试 Webpack 配置	1. 在 `vue.config.js` 文件中添加 `devtool: 'source-map'`，开启 Source Map。 2. 使用 `console.log` 打印 Webpack 的配置对象，查看配置是否正确。 3. 使用 Webpack 的 Debugger 功能进行调试。
如何在项目中引入 less/sass 等预处理器	1. 安装对应的 Loader，比如 `less-loader` 或 `sass-loader`。 2. 在 `vue.config.js` 文件中配置 Loader。 3. 在 Vue 组件中使用 `<style lang="less">` 或 `<style lang="sass">` 标签。

八、总结

今天咱们聊了 Vue CLI 的 Webpack 配置定制与优化，相信大家对如何添加自定义的 Loader 和 Plugin，以及如何优化 Webpack 的配置，都有了一定的了解。记住，Webpack 配置是一个复杂的家伙，需要不断地学习和实践才能掌握。希望大家能够多多尝试，多多总结，最终成为 Webpack 配置的大佬！

好了，今天的讲座就到这里了，谢谢大家！如果大家有什么问题，欢迎在评论区留言，我会尽力解答的。

(鞠躬)

Vue CLI Webpack 配置定制与优化：让你的项目飞起来！

一、Vue CLI 与 Webpack 的爱恨情仇

二、定制 Webpack 配置的几种姿势

三、vue.config.js：最友好的姿势

1. 添加自定义 Loader

2. 添加自定义 Plugin

3. 更多 vue.config.js 的配置选项

四、chainWebpack：精细调味的姿势

五、configureWebpack：简单粗暴的姿势

六、Webpack 配置优化的几个小技巧

七、常见问题及解决方案

八、总结

发表回复 取消回复

三、`vue.config.js`：最友好的姿势

3. 更多 `vue.config.js` 的配置选项

四、`chainWebpack`：精细调味的姿势

五、`configureWebpack`：简单粗暴的姿势

发表回复取消回复