webpack3.10.0升级到webpack4.46.0

目前公司webpack版本太低，3.10.0.去官网查看了一下现在已经有5.x版本了，为了稳健性，决定升级到4.x的最终版本4.46.0
https://github.com/webpack/webpack/releases/tag/v4.46.0
这里记录下升级遇到的问题

1.过程
yarn add webpack@4.46.0 -D
yarn dev

Error: Cannot find module 'webpack/bin/config-yargs'

原因：webpack-dev-server版本过低（“webpack-dev-server”: “2.9.7”）需要版本^3.0.0

延伸：webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务

2.yarn add webpack-dev-server@3.10.0 -D
yarn dev

Error: Cannot find module 'webpack-cli/bin/config-yargs'

原因： webpack-cli 包已经从webpack分离出来了，所以要单独安装
这里要注意webpack-cli 和 webpack-dev-server版本兼容问题，安装了最新的webpack-cli不兼容，最后找到了可以兼容的版本yarn add webpack-cli@3.3.12 -D

3.yarn dev

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

发现是html-webpack-plugin的问题
解决方案可以看这里
https://github.com/jantimon/html-webpack-plugin/issues/841

“html-webpack-plugin”: "2.30.1"公司项目版本过低，更新html-webpack-plugin到兼容版本
yarn add html-webpack-plugin@3.2.0 -D

4.yarn dev

Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined 


Module build failed (from ./node_modules/url-loader/index.js):
TypeError: Cannot read property 'context' of undefined

一个个来

• TypeError: Cannot read property ‘vue’ of undefined

vue-loader和webpack 版本不兼容导致

自测yarn add vue-loader@14.2.2 -D 可兼容
Cannot read property ‘vue’ of undefined 解决

• vue-loader v14.x和v15.x改动据说比较大，参考https://blog.csdn.net/csdn_yudong/article/details/84900409

error in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff

Module build failed (from ./node_modules/url-loader/index.js):
TypeError: Cannot read property 'context' of undefined

目测是url-loader问题，第一反应更新一下版本(当前0.6.1)，
升级到最新版^4.1.1
file-loader 1.1.5 升级到最新^6.2.0
再启动 正常了
然后又报其它错

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
TypeError: Cannot read property 'target' of undefined

升级 svg-sprite-loader到最新^6.0.5
终于不报错了
但是项目页面一片空白
继续解决问题

5.项目页面一片空白

升级webpack到4之后之前的一些插件不支持了
extract-text-webpack-plugin（css样式抽离成单独的css文件）改为mini-css-extract-plugin@1.4.1

// var ExtractTextPlugin = require('extract-text-webpack-plugin') 替换为
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
if (options.extract) {
  // return ExtractTextPlugin.extract({
  //   use: loaders,
  //   fallback: 'vue-style-loader'
  // }) 替换为
  return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders) 

修改webpack.prod.config.js

// var ExtractTextPlugin = require('extract-text-webpack-plugin') 替换为
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
plugins：[
    // new ExtractTextPlugin({
    //   filename: utils.assetsPath('css/[name].[contenthash].css')
    // }) 替换为
new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css')
 }) 

webpack4删除了webpack.optimize.CommonsChunkPlugin（提取公共代码），使用使用splitChunks替代
略过

打包后不报错，vue页面空白修改下面的代码

  {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')] //修改后
       // include: [resolve('src'), resolve('test') ,resolve('node_modules/webpack-dev-server/client')]
      },

原因webpack4不允许 exports和import混用
页面空白解决

6.打开项目发现elementUI的icon不显示

改esModule为false，esModule默认为true

最后
7.测试打包
yarn build

TypeError: compilation.contextDependencies.push is not a function

先试试升级 copy-webpack-plugin 4.2.3 到最新^8.1.1

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, transformAll?, toType?, force?, priority?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)

配置方式改了 ，要去官网看最新配置方式

//旧
  new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }])

//新 就是多了个patterns ，ignore属性也没了
  new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory 
      }]
    })

参考官网CopyWebpackPlugin配置

8.继续测试

TypeError: compilation.getCache is not a function

怀疑是版本太高，copy-webpack-plugin 降级为6.0.3

终于不报错了，打包的文件看大小也正常，把包发布看看

打包后的文件又出现了elementUI的icon不显示问题

 return [MiniCssExtractPlugin.loader].concat(loaders)

改为

   return [{
        loader: MiniCssExtractPlugin.loader,
        options: {publicPath:'../../'}
      }].concat(loaders)

完成

参考文章：Webpack4升级指南