vue cli4 配置示例

vue.config.js

const Webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|ttf)(\?.*)?$/i
const resolve = dir => path.join(__dirname, dir)
const port = process.env.port || process.env.npm_config_port || 8088// dev port
const isPro=process.env.NODE_ENV === 'production'

module.exports = {
  lintOnSave:false,
  // 基础路径
  publicPath: isPro ? "./" : "./",
  // 输出文件目录
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap:false,  // 设置上线后是否加载webpack文件
  parallel: require("os").cpus().length > 1, //该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      const date = new Date()
      args[0].createDate = date
      return args
    })
    config.resolve.symlinks(true); // 修复热更新失效
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))

      config.module
      .rule('min-image')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快
      .end()
  },

  configureWebpack: {
    performance: {
      hints:false
    },
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][name].gz[query]',
        algorithm: 'gzip',
        test: productionGzipExtensions,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      }),
      new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'], // 移除console
            },
          },
        }),
      ],
      splitChunks: { // 分割代码块
        cacheGroups: {
            vendor: {//第三方库抽离
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 100//权重
            },
            common: {  //公用模块抽离
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,//在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 60
            },
            styles: { //样式抽离
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
    },
  },
  css: {
    extract: isPro ? {
      ignoreOrder: true,
   } : false,
      loaderOptions: {
        less: {
          globalVars: {
            hack: `true; @import '~@/assets/css/variable.less';`
          }
        }
      }
  }

};