vue-cli 3.x 打包配置

vue.config.js

/* eslint-disable comma-dangle */
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
// js 压缩
const TerserPlugin = require('terser-webpack-plugin')
// gzip 生成
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// cdn 支持
const CDNPlugin = require('webpack-cdn-plugin')
// 路径合成
const resolve = dir => path.join(__dirname, dir)
// 判断开发环境
const isProduction = process.env.NODE_ENV === 'production'
// 部署路径
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : '/'
// 本地服务
const devServer = {
  host: 'localhost',
  port: 8080,
  hotOnly: false,
  https: false,
  open: true, // 自动打开系统默认浏览器
  compress: false, // 关闭压缩
  overlay: {
    // 全局弹出提示
    warnings: true,
    errors: true
  },
  // proxy: {
  //   // 配置跨域
  //   '^/api': {
  //     target: 'https://example.com'
  //   }
  // }
}
// cdn
const externals = {
  vue: 'Vue',
  axios: 'axios',
  'element-ui': 'ELEMENT',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  echarts: 'echarts'
}
// 生产环境插件
const prodPlugins = [
  new TerserPlugin({
    cache: true,
    parallel: true,
    sourceMap: true,
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }),
  new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: /\.js$|\.html$|\.json$|\.css/,
    threshold: 10240,
    minRatio: 0.8
  })
]
// 通用插件
const basePlugins = [
  new CDNPlugin({
    modules: [
      { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
      { name: 'axios', var: 'axios', path: 'dist/axios.min.js' },
      { name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' },
      {
        name: 'element-ui',
        var: 'ELEMENT',
        path: 'lib/index.js',
        style: 'lib/theme-chalk/index.css'
      },
      { name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: 'dist/vue-router.min.js'
      }
    ],
    publicPath: '/node_modules'
  })
]
// webpack 配置
const configureWebpack = config => {
  config.externals = externals
  config.plugins.push(...basePlugins)
  if (isProduction) {
    config.plugins.push(...prodPlugins)
  }
}
// webpack 链式配置(精确修改配置项)
const chainWebpack = config => {
  config.when(isProduction, config => {
    config.optimization.minimize(true)
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        public: {
          name: 'public',
          test: resolve('src/components'),
          minSize: 0, // 表示在压缩前的最小模块大小,默认值是 30kb
          minChunks: 2, // 最小公用次数
          priority: 5, // 优先级
          reuseExistingChunk: true // 公共模块必开启
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    })
  })
  // 定义路径别名
  config.resolve.alias
    .set('@', resolve('src'))
    .set('@c', resolve('src/components'))
}

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: BASE_URL,
  // 生产环境不需要生成 map 文件
  productionSourceMap: false,
  // 测试环境服务
  devServer: devServer,
  // webpack 配置
  configureWebpack: configureWebpack,
  // webpack 链式配置
  chainWebpack: chainWebpack
}