以下整理以下自己项目中用到的webpack打包优化配置

打包时关闭调试工具，可以减小打包后的体积，加快打包构建速度。

{ devtool: false }

打包时添加gzip压缩，减小打包体积

const CompressionWebpackPlugin = require("compression-webpack-plugin")
{
 plugins: [
   new CompressionWebpackPlugin({
     test: /\.js$|\.css$/, 
     threshold: 1024
   }),
   new webpack.optimize.AggressiveMergingPlugin(), //合并块
   new webpack.optimize.ModuleConcatenationPlugin() //作用域提升,加快运行速度
 ]    
}

提取公共代码，启用代码分割，减少体积

optimization: {
  splitChunks: {
    chunks: 'async', // all async initial 是否对异步代码进行的代码分割
    minSize: 30000,  // 引入模块大于30kb才进行代码分割
    maxSize: 0, // 引入模块大于Xkb时，尝试对引入模块二次拆分引入
    minChunks: 1, // 引入模块至被使用X次后才进行代码分割
    maxAsyncRequests: 5, // 
    maxInitialRequests: 3,
    automaticNameDelimiter: '~', // 模块间的连接符，默认为"~"
    name: true,
    cacheGroups: {
      'echarts': {
        test: /node_modules[\\/]echarts/,
        chunks: 'initial',
        priority: 20,
        name: true,
        enforce: true
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10  // 优先级，越小优先级越高
      },
      default: {  // 默认设置，可被重写
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true  // 如果本来已经把代码提取出来，则重用存在的而不是重新产生
      }
    }
  }
}

提取打包的CSS，并且加入时间戳防止静态缓存

plugins: [
  new ExtractTextPlugin(`styles.css${Date.now()}`),
]

输出重构js ,打包编译后的文件名称【模块名称.版本号.时间戳】，防止静态缓存。

output: { // 防止浏览器缓存。输出重构,打包编译后的文件名称【模块名称.版本号.时间戳】
  filename: `js/[name]-[hash].js?t=${time}`,
  chunkFilename: `js/[name]-[hash].js?t=${time}`
}