webpack-chain 使用实例

链接：https://juejin.cn/post/6844904122664091661

对于webpack-chain 在vue.config.js中的一些总结

1. 为何选择使用webpack-chain?

   • 对vue.config.js进行更细的配置(保存原来的options，添加信息的options)
   • 审查当前的vue配置并输出到 指定文件：vue inspect > output.js

2. 如何 配置loader

  chainWebpack: config => {
      config.module.rule('规则名称')
          .test('匹配规则的表达式')
          .exclude
          .add('匹配不需要进行使用loader的表达式') // exclude(xxx)
          .end() //返回上一级
          .use('loader的名称')
          .loader('loader的名称') // use:'xxx'
          .tap(options => {
              // 修改它的选项...
              // 可以对这里的options进行配置
              return options;
          }) // options:{}
          .end() // 返回上一级 继续添加loader
          .use('loader的名称')
          .loader('loader的名称') // use:'xxx'
          .tap(options => {
              // 修改它的选项...
              // 可以对这里的options进行配置
              return options;
          }) // options:{}
  }

  // 一个🌰:对svg的优雅处理
  config.module
      .rule("svgIcon")
      .test(/\.svg$/)
      .include.add(resolve("src/components/l-icon/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .tap(options => {
          options = {
              symbolId: "icon-[name]"
          };
          return options;
      });

  // 原有的svg图像处理loader添加exclude
  config.module
      .rule("svg")
      .exclude.add(resolve("src/components/l-icon/svg"))
      .end();
复制代码

2. 如何 配置plugin

chainWebpack: config => {

    // 使用 基本使用 进行处理
    config.plugin(name) // 保证name的唯一性，避免出现覆盖的情况
        .use(plugin, options) // plugin：plugin的实例 options:plugin的配置

    //  DllReferencePlugin        
    arr.map((item, index) => {
        if (item.endsWith('.js')) {
            // 使用 AddAssetHtmlPlugin 进行处理
            config.plugin( `AddAssetHtmlPlugin${index}` ) //注意这里的index，不然会出现覆盖的情况。
                .use(AddAssetHtmlPlugin, [{
                    filepath: pathResolve('dll/' + item),
                    publicPath: 'dll/',
                    outputPath: 'dll' //打包结果中的dll将会放到这个文件夹下面
                }])
        }
        if (item.endsWith('.json')) {
            // 使用 webpack.DllReferencePlugin 进行处理
            config.plugin( `DllReferencePlugin${index}` )
                .use(webpack.DllReferencePlugin, [{
                    manifest: pathResolve('dll/' + item)
                }])
        }
    })
}
复制代码

3. 如何 配置 optimization

  chainWebpack: config => {
      config.optimization.minimizer('terser')
          .tap(args => {
              const {
                  terserOptions: {
                      compress
                  }
              } = args[0]
              compress.pure_funcs = ['console.log'];
              return args;
          })
          .end()
          .splitChunks({
              maxSize: 100 * 1024, // 控制包的最大字节数
              minSize: 10 * 1024, // 控制包的最小字节数
              minChunks: 1,
              cacheGroups: {
                  libs: {
                      name: 'chunk-libs',
                      test: /[\\/]node_modules[\\/]/,
                      priority: 10,
                      chunks: 'initial' // only package third parties that are initially dependent
                  },
                  style: {
                      name: 'chunk-style',
                      test: /.(css|scss)$/,
                      priority: 20,
                      chunks: 'all'
                  },
                  component: {
                      name: 'chunk-component',
                      test: path.resolve(__dirname, 'src/common/components'),
                      minChunks: 3, //  minimum common number
                      priority: 5,
                      reuseExistingChunk: true
                  }
              }
          })
  }
复制代码

4. 不同环境配置 when

chainWebpack: config => {
    // config.when(condition,config=>{
    // 满足条件的配置函数
    // },config=>{
    // 不满足条件的配置函数
    // })
    config.when(process.env.VUE_APP_MODE === 'analyzer',
        /* -- 打包分析 配置 --  */
        config => {
            // 打包分析
            config.plugin('analyzer')
                .use(WebpackBundleAnalyzer)
        }
    )
}
复制代码

5. 其他配置

    // 配置扩展名
    config.resolve.extensions
        .prepend('.ts') // prepend : 在extensions数组的前面 插入值(类似数组的unshift方法)
        .add('.tsx') // add: 在extensions数组的后面 插入值(类似数组的push方法)
    // alias
    config.resolve.alias
        .set('@Utils', pathResolve('./src/Application/utils'))