vue-cli/webpack4.x 打包--chainWebpack

 

chainWebpack如何配置

chainWebpack为一个方法，传入 config 进行配置

区分生产和开发环境

const IS_PROD = ['production', 'stage', 'preview'].includes(process.env.NODE_ENV)
const IS_DEV = ['development'].includes(process.env.NODE_ENV)

svg处理

参考  vue项目中svg图（svg标签）的使用方法

"svg-sprite-loader": "4.3.0"

"vue-svg-loader": "0.16.0",

  const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/icons'))
    config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

为了补删除换行而加的配置

preserveWhitespace 是什么？

preserveWhitespace 是 compilerOptions对象中的属性之一。如果设置为false,标签之间的空白将会忽略，这可能会导致性能稍好，但可能会影响嵌入式元素的布局。true表示编译的渲染函数将会保留HTML标记之间的所有空白字符。

// set preserveWhitespace
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();

 生成源映射控制

//cheap-source-map--不显示源码 、source-map--显示源码 、 eval--最快的编译办法
config.when(IS_DEV, config => config.devtool('cheap-source-map'))

性能分析工具

"webpack-bundle-analyzer": "4.4.2",

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin  

 

分包

"script-ext-html-webpack-plugin": "2.1.4",

config.when(!IS_DEV, config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        minSize: 20000,
        maxAsyncRequests: 6,
        maxInitialRequests: 6,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true,
            maxSize: 10240
          },
          libs: {
            name: 'chunk-libs',
            chunks: 'initial', // only package third parties that are initially dependent
            test: /[\\/]node_modules[\\/]/,
            priority: 10
            // maxSize: 2048
          },
          antdv: {
            name: 'chunk-ant-design-vue',
            chunks: 'initial', // only package third parties that are initially dependent
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            priority: 13
            // maxSize: 2048
          },
          monacoeditor: {
            name: 'chunk-monaco-editor',
            chunks: 'initial', // only package third parties that are initially dependent
            test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
            priority: 11
          },
          jsonaceeditor: {
            name: 'chunk-vue2-ace-editor',
            chunks: 'initial', // only package third parties that are initially dependent
            test: /[\\/]node_modules[\\/]vue2-ace-editor[\\/]/,
            priority: 11
          },
        }
      })
      config.optimization.runtimeChunk('single')
      return {
        plugins: [new BundleAnalyzerPlugin()]
      }
    })

 

 

删除预加载

config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test

 

设置别名

config.resolve.alias
  .set('assets',resolve('src/assets'))
  .set('components',resolve('src/components'))
  .set('static',resolve('src/static'))
  .delete('static') // 删掉指定的别名