webpack之优化篇（二）：优化配置提高构建速度

webpack系列说明

已完成：

基础篇

1. webpack之基础篇（一）：webpack的基础认识
2. webpack之基础篇（二）：前端基本开发环境的搭建
3. webpack之基础篇（三）：配置loader和plugin
4. webpack之基础篇（四）：webpack-dev-server浅析
5. webpack之基础篇（五）：配置开发、测试、生产环境

优化篇

1. webpack之优化篇（一）：优化静态资源
2. webpack之优化篇（二）：优化配置提高构建速度
3. webpack之优化篇（三）：http压缩之Gzip
4. webpack之优化篇（四）：webpack DllPlugin配置的代替方案hard-source-webpack-plugin

原理篇

1. webpack之原理篇（二）：hash、chunkhash、contenthash的认

编写中：

1. webpack之原理篇（一）：webpack的工作流程和原理
2. webpack之原理篇（三）：webpack-dev-server原理
3. webpack之原理篇（四）：手写loader
4. webpack之原理篇（五）：手写plugin

webpack4.x

此优化配置的文章是基于webpack4.x的版本

在webpack4中，一些默认插件由 optimization 配置替代了，如下：

• CommonsChunkPlugin废弃，由 optimization.splitChunks 和 optimization.runtimeChunk 替代，前者拆分代码，后者提取runtime代码。原来的CommonsChunkPlugin产出模块时，会包含重复的代码，并且无法优化异步模块，minchunks的配置也较复杂，splitChunks解决了这个问题；另外，将 optimization.runtimeChunk 设置为true（或{name: “manifest”}），便能将入口模块中的runtime部分提取出来。
• NoEmitOnErrorsPlugin 废弃，由 optimization.noEmitOnErrors 替代，生产环境默认开启。
• NamedModulesPlugin 废弃，由 optimization.namedModules 替代，生产环境默认开启。
• ModuleConcatenationPlugin 废弃，由 optimization.concatenateModules 替代，生产环境默认开启。
• optimize.UglifyJsPlugin 废弃，由 optimization.minimize 替代，生产环境默认开启。

optimization 还提供了如下默认配置：

  optimization: {
   
   
    splitChunks: {
   
   
      chunks: 'all',
      cacheGroups: {
   
   
        libs: {
   
   
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // 只打包初始时依赖的第三方
        },
        elementUI: {
   
   
          name: 'chunk-elementUI', // 单独将 elementUI 拆包
          priority: 20