分享两种vue.config配置webpack插件的方法

        vue.config.js中通过设置configureWebpack来配置webpack插件，configureWebpack有两种形式，一种是对象形式，一种是函数的形式，并且都对生产环境和开发环境做了判断。

下边分别对两种方式做两个示例。示例中删除了多余的插件配置。

对象形式

module.exports = {
  // 对象的形式配置configureWebpack
  configureWebpack: {
    name: 'xxx',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: process.env.NODE_ENV === 'production' ? [
      // 去除console.log
      new UglifyPlugin(),
      // 代码压缩
      new CompressionPlugin()
    ] : []
  },
};

函数形式

module.exports = {
  // 函数的形式配置configureWebpack
  configureWebpack: (config) => {
    config.name = 'xxx'
    config.resolve = {
      ...config.resolve,
      alias: {
        '@': path.resolve(__dirname, 'src'),
      }
    }
    // 对生产环境的配置
    if (process.env.NODE_ENV === 'production') {
      const plugns = [
        // 去除console.log
        new UglifyPlugin(),
        // 代码压缩
        new CompressionPlugin()
      ]
      config.plugins.push(...plugns)
    }
  },
};