vue cli4 配置示例

vue.config.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

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';`
          }
        }
      }
  }
 
};