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