vue-cli 3.x中webpack-chain常用配置

webpack-chain

Use a chaining API to generate and simplify the modification of webpack version 2-4 configurations.

外部引用的CDN资源

vue.config.js配置

module.exports = {
  chainWebpack: config => {
    config.externals({
      vue: 'window.Vue',
      axios: 'window.axios',
      moment: 'window.moment'
    })
  }
}

设置alias别名

// vue.config.js
const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        css: resolve('src/assets/css'),
      },
    },
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets',resolve('src/assets'))
      // 这里只写了两个个，你可以自己再加，按这种格式.set('', resolve(''))
  }
};

terser-webpack-plugin配置：移除console

1. 安装terser-webpack-plugin

yarn add terser-webpack-plugin -D

2. vue.config.js配置

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          config.optimization.minimizer([
            new TerserPlugin({
              test: /\.js(\?.*)?$/i,
              terserOptions: {
                compress: {
                  drop_console: true,
                  pure_funcs: ['console.log']
                }
              }
            })
          ])
        } else {
          // disable optimization during tests to speed things up
          config.optimization.minimize(false)
        }
      }
}

其他配置参考 Terser minify options

assets-webpack-plugin配置：Webpack plugin that emits a json file with assets paths.

1. 安装assets-webpack-plugin

yarn add assets-webpack-plugin -D

2. vue.config.js配置

const AssetsPlugin = require('assets-webpack-plugin')

module.exports = {
    config
      .plugin('assets')
      .use(AssetsPlugin, [{
        filename: 'webpack.assets.json', // 输出文件名
        path: process.cwd(), // 输出目录
        processOutput: function (assets) {
          return JSON.stringify(assets); // 输出内容
        }
      }])
      .init((Plugin, args) => new Plugin(...args));
  }
}