vj/vue.config.js

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
// 导入代码混淆插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // publicPath: '/',
  assetsDir: 'static',
  lintOnSave: true,
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // 开启 CSS source maps?
  css: {
    sourceMap: true
  },
  // transpileDependencies: ['swiper', 'dom7', 'element-ui', 'nprogress', 'axios', 'dayjs', 'vue-i18n'],
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('api', resolve('src/api'))
      .set('utils', resolve('src/utils'))
      .set('components', resolve('src/components'))
    // 图片压缩
    config.module.rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: '65-90', speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      })
      // .end()
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 将每个依赖包打包成单独的js文件
      const plugins = []
      // 生产环境 gzi压缩
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            mangle: {
              toplevel: true
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      )
      config.plugins = [
        ...config.plugins,
        ...plugins
      ]
    }
  }
  //       {
  //   test: /\.js$/,
  //     loader: 'babel-loader',
  //       include: [
  //         resolve('src'),
  //         resolve('test'),
  //         resolve('node_modules/element-ui/src/mixins/emitter.js'),//<------add
  //       ]
  // }
}