webpack3升级为webpack4

写在前面的话：为什么要升级，因为公司目前的项目使用webpack3，但是因为是多页应用，入口估计有一百多个，开发模式下慢得不像话，修改一个文件需要十几秒才编译好，之前的解决方案是减少入口，但是要调试其他入口的文件就必须重启，这一直是我心里的刺。后来听说webpack4优化了打包速度，于是就准备去尝试了。升级后速度直接变为热更新2秒。惊到我~

webpack3的配置

webpackConfig
- context
- entry
- output
- resolve
  - alias
- module
  - rules
    - eslint-loader
    - vue-loader（使用loader里option配置vueLoaderConfig）
    - url-loader
    - file-loader
    - babel-loader
    - css-loader
    - stylus-loader
- plugins
  - DefinePlugin
  - ProvidePlugin
  - HotModuleReplacementPlugin
  - NamedModulesPlugin
  - ...HtmlWebpackPlugin
  - CopyWebpackPlugin
  - ExtractTextPlugin
  - CommonsChunkPlugin
  - UglifyJsPlugin
  - OptimizeCSSPlugin
- devServer

webpack4的配置

webpackConfig

context
entry
output
resolve
- alias
module
- rules
  - eslint-loader
  - vue-loader（修改后使用plugin（VueLoaderPlugin））
  - url-loader
  - file-loader
  - babel-loader
  - css-loader
  - stylus-loader
plugins
- DefinePlugin
- ProvidePlugin
- HotModuleReplacementPlugin
- NamedModulesPlugin
- ...HtmlWebpackPlugin
- CopyWebpackPlugin
- MiniCssExtractPlugin(对应ExtractTextPlugin)
- CommonsChunkPlugin
- VueLoaderPlugin
devServer

optimization

 optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap
                    ? {safe: true, map: {inline: false}}
                    : {safe: true}
      })  // use OptimizeCSSAssetsPlugin
    ],
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      maxInitialRequests: 10,
      cacheGroups: {
        vendor: {
          test: /(jquery|fastclick|vue.esm.js)/,
          name: 'vendor',
          chunks: 'all'
        },
      }
    }
  },

升级包

"html-webpack-plugin": "^4.0.0-alpha",
"webpack": "^4.16.0",
"vue-loader": "^15.2.6",
"vue-style-loader": "^4.1.1",