写在前面的话：为什么要升级，因为公司目前的项目使用webpack3，但是因为是多页应用，入口估计有一百多个，开发模式下慢得不像话，修改一个文件需要十几秒才编译好，之前的解决方案是减少入口，但是要调试其他入口的文件就必须重启，这一直是我心里的刺。后来听说webpack4优化了打包速度，于是就准备去尝试了。升级后速度直接变为热更新2秒。惊到我~
webpack3的配置
webpackConfig
contextentryoutputresolve
aliasmodule
rules
eslint-loadervue-loader（使用loader里option配置vueLoaderConfig）url-loaderfile-loaderbabel-loadercss-loaderstylus-loaderplugins
DefinePluginProvidePluginHotModuleReplacementPluginNamedModulesPlugin...HtmlWebpackPluginCopyWebpackPluginExtractTextPluginCommonsChunkPluginUglifyJsPluginOptimizeCSSPlugindevServer
webpack4的配置
webpackConfig
contextentryoutputresolve
aliasmodule
rules
eslint-loadervue-loader（修改后使用plugin（VueLoaderPlugin））url-loaderfile-loaderbabel-loadercss-loaderstylus-loaderplugins
DefinePluginProvidePluginHotModuleReplacementPluginNamedModulesPlugin...HtmlWebpackPluginCopyWebpackPluginMiniCssExtractPlugin(对应ExtractTextPlugin)CommonsChunkPluginVueLoaderPlugindevServeroptimizationjavascript 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",
转载于:https://www.cnblogs.com/Juliana1992/p/10332990.html
相关资源：JAVA上百实例源码以及开源项目
