vue cli升级webapck4总结
webpack4released已经有一段时间了，插件系统趋于平稳，适逢对webpack3的打包速度很不满意，因此决定将当前在做的项目进行升级，正好也实践一下webpack4。
新特性
0配置
应该是parcel出来以后，webpack团队意识到其配置确实有点复杂，不太容易上手。so,webapck4开始支持0配置启动。不过，万变不离其宗，webpack4的0配置也只是支持了默认entry和output而已，即默认entry为./src,默认output为/dist。
模式选择mode
mode有两个可选项，production&development。作为必选项，mode是不可缺省的。在production模式下，会默认做一些必要的优化，如代码压缩和作用域提升，还会默认指定process.env.NODE_ENV为production。在development模式下，优化了增量构建，支持注释和提示，并且支持eval下的sourcemaps，同时默认指定process.env.NODE_ENV为development。
sideEffects
通过该配置可以大幅度减小打包体积。当模块的package.json配置sideEffects:false表明该模块没有副作用，也就意味着webpack可以安全地清除被用于重复导出(re-exports)的代码。
模块类型
webpack4提供了5种模块类型。
- json:可通过require和import导入的JSON格式的数据(默认为.json的文件)
- webassembly:WebAssembly模块，（目前是.wasm文件的默认类型）
- javascript/auto:(webpack3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。
- javascript/esm:EcmaScript模块（默认.mjs文件）。
- javascript/dynamic:仅支持CommonJS&AMD。
JSON
webpack4不仅支持本地处理JSON，还支持对JSON的TreeShaking。当使用ESM语法importjson时，webpack会消除掉JSONModule中未使用的导出。此外，如果要用loader转换json为js，需要设置type为javascript/auto。
optimization
Webpack4删除了CommonsChunkPlugin，并默认启用了它的许多功能。因此webpack4可以实现很好的默认优化。但是，对于那些需要自定义的缓存策略，增加了optimization.splitChunks和optimization.runtimeChunk。具体解释可参考这篇文章，解释得很详细。RIPCommonsChunkPlugin点击预览
。
手把手升级
我是把原来vuecli的项目做了一下升级，总体来说，升级还算是比较顺利步骤，这里我们分成两步走，首先升级相关依赖的插件，然后优化webapck配置文件。
升级插件
首先要把下面列表的插件升级到对应版本或者最新版本
webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2
如果遇到其他包报错，应该是升级到最新的就可以解决了。
更新配置文件
webpack.dev.conf.js
dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置
mode:'development'
webpack.production.conf.js
webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpackruntime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。
mode:'production',
optimization:{
splitChunks:{
cacheGroups:{
vendors:{
test:/[\\/]node_modules[\\/]/,
chunks:'initial',
name:'vendors',
},
'async-vendors':{
test:/[\\/]node_modules[\\/]/,
minChunks:2,
chunks:'async',
name:'async-vendors'
}
}
},
runtimeChunk:{name:'runtime'}
}
总结
总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。