webpack3.x升级4.x 的一次记录

更新相关模块版本

以下为兼容webpack4.x的各包版本，如果你的项目中有用到相同包，在改package.json为相同的版本。
然后运行npm install --force 升级相关包

"webpack": "^4.8.1",
"webpack-dev-server": "^3.1.4",
"html-webpack-plugin": "^3.2.0",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"style-loader": "^0.23.1",
"css-loader": "^2.1.1",
"sass-loader": "^7.1.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"file-loader": "^3.0.1",
"url-loader": "^1.1.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",

问题1：webpack.optimize.UglifyJsPlugin has been removed

webpack4.x中已经没有UglifyJsPlugin
1.把webpack.prod.conf.js中UglifyJsPlugin相关代码注释掉。
2.在package.json的scripts下的build命令添加一个参数，即可实现js的压缩 。
–mode production 表示生产环境

//webpack.prod.conf.js 文件 注释UglifyJsPlugin配置
 // new webpack.optimize.UglifyJsPlugin({
 //   compress: {
 //     warnings: false
 //   },
 //   sourceMap: config.build.productionSourceMap,
 //   parallel: true
 // }),

//package.json文件 添加 --mode production参数
"scripts": {
   "start": "npm run dev",
   "build": "node build/build.js --mode production",
   "analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod"
 },

问题2： webpack.optimize.CommonsChunkPlugin has been removed

webpack4.x中已经没有CommonsChunkPlugin
1.把webpack.prod.conf.js中CommonsChunkPlugin相关代码注释掉。
2.在webpack.prod.conf.js中添加配置，与plugins同级的。

//webpack.prod.conf.js 文件，注释CommonsChunkPlugin配置
 // new webpack.optimize.CommonsChunkPlugin({
 //   name: 'vendor',
 //   minChunks: function (module) {
 //     // any required modules inside node_modules are extracted to vendor
 //     return (
 //       module.resource &&
 //       /\.js$/.test(module.resource) &&
 //       module.resource.indexOf(
 //         path.join(__dirname, '../node_modules')
 //       ) === 0
 //     )
 //   }
 // }),
 // new webpack.optimize.CommonsChunkPlugin({
 //   name: 'manifest',
 //   minChunks: Infinity
 // }),
 // new webpack.optimize.CommonsChunkPlugin({
 //   name: 'app',
 //   async: 'vendor-async',
 //   children: true,
 //   minChunks: 3
 // }),

//新配置
  plugins：[...],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
        manifest: {
          name: 'manifest',
          minChunks: Infinity
        },
      }
    },
  }

问题3：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

extract-text-webpack-plugin不兼容webpack4.x，2种方案：
1.升级包到^4.0.0-beta.0，不过官方不推荐，而且我升级之后会出现问题4。
2.使用mini-css-extract-plugin替代。

//1.去掉package.json 中的 "extract-text-webpack-plugin": "^4.0.0-beta.0"

//2.安装 mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin

//3.修改webpack.prod.conf.js配置
//注释掉
 // const ExtractTextPlugin = require('extract-text-webpack-plugin')
 // new ExtractTextPlugin({
 //   filename: utils.assetsPath('css/[name].[contenthash].css'),
 //   allChunks: false,
 // }),
// 添加
 new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: false,
    }),

问题4：Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

同上，一开始直接升级了"extract-text-webpack-plugin": “^4.0.0-beta.0”，但是报了这个错，所以直接修改为mini-css-extract-plugin包

问题5：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

vue-loader 15.x之后，需要配置VueLoaderPlugin，在webpack.prod.conf.js添加如下配置

const { VueLoaderPlugin } = require('vue-loader');
plugins: [
	new VueLoaderPlugin(),
	...
]