vue / vue-cli升级webpack4

vue升级webpack4.x

---

升级包

首先升级开发依赖中webpack构建流程中用到的loader和plugin以及它们的相关依赖升级到最新版本

yarn upgrade -L

安装包

webpack4.x 需要依赖webpack-cli

yarn add webpack-cli --dev

需要特别注意的依赖包extract-text-webpack-plugin

因为extract-text-webpack-plugin的最新正式版还没有对webpack4.x进行支持，所以有两个选择，第一个是：yarn upgrade extract-text-webpack-plugin@next升级到测试版，第二个是换成mini-css-extract-plugin，作者在这采用的第一种方案。

修改配置文件

webpack4内置了optimization.splitChunks、optimization.runtimeChunk代替CommonsChunkPlugin,
内置了optimization.noEmitOnErrors代替NoEmitOnErrorsPlugin；
内置了optimization.namedModules代替NamedModulesPlugin；
下面针对配置文件进行修改

修改开发环境webpack.dev.conf.js

增加设置mode为development，删除DefinePluginplugin中的环境变量设置，如果只用来设置环境变量，可以删除插件；
注释webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  // ....
  plugins: {
      // new webpack.NamedModulesPlugin(), 
      // new webpack.NoEmitOnErrorsPlugin(),
  }

修改生产环境webpack.prod.conf.js

增加设置mode为production，optimization配置；删除DefinePluginplugin中的环境变量设置，如果只用来设置环境变量，可以删除插件；
注释webpack.optimize.CommonsChunkPlugin、uglifyjs-webpack-plugin、webpack.optimize.ModuleConcatenationPlugin；
如果npm run build时报错Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css，将contenthash换成hash即可

const webpackConfig = merge(baseWebpackConfig, {
  mode: