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",