Webpack3.x升级至 4.x 小记

近期项目部署遇到点问题，需要升级webpack版本，特此整理一小记，记录升级过程中的依赖包及报错处理。

本次升级的依赖包及对应版本对照表：

npm 包	当前版本	升级版本	S/D
vue	^2.5.18	^2.6.14	-S
element-ui	^2.4.11	^2.15.8 (为了解决el-date-picker 告警问题)	-S
css-loader	^0.26.4	^5.2.7	-D
file-loader	^1.1.5	^6.2.0	-D
html-webpack-plugin	^2.30.1	^4.5.0	-D
less	^3.13.1	^4.1.3	-D
less-loader	^5.0.0	^7.3.0	-D
style-loader	^0.21.0	^2.0.0	-D
url-loader	^1.1.2	^4.1.1	-D
vue-loader	^12.2.2	^15.9.8	-D
vue-template-compiler	^2.4.2	^2.6.14	-D
webpack	^3.12.0	^4.41.5	-D
webpack-cli	---	^3.3.10	-D
webpack-dev-server	^2.9.2	^3.10.1	-D

webpack-cli：webpack4.x中，webpack-cli已经从webpack中分离出来了。所以需要单独下载

两种升级方法：

1. npm update package@version -D （需要区分是生产依赖还是开发依赖）

2. 将要下载的版本写进package.json文件中，删除原来的 node_modules， 在执行以下命令即可

   npm install rimraf -g
   rimraf node_modules
   npm cache clean --force
   npm install

报错信息整理，

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

原因：是webpack，webpack-cli，webpack-dev-server之间的版本问题。

解决：webpack4.x中，webpack-cli已经从webpack中分离出来。所以需要单独下载

// 如果已经按照上述表格更新依赖，此处无须再次安装
npm install webpack@4.41.5  webpack-cli@3.3.10   webpack-dev-server@3.10.1  -D

②TypeError: Cannot read property 'tap' of undefined

原因：html-webpack-plugin插件版本安装不兼容

解决： 安装 html-webpack-plugin 版本为4.5.0

③ TypeError:Cannot read property ‘vue’ of undefined

④ TypeError: VueLoaderPlugin is not a constructor

原因：vue-loader 和 vue-template-compiler 插件版本安装不兼容

解决：npm install vue-loader@15.9.8 vue-template-compiler@2.6.14 -D

webpack.config.js中使用插件：

  const { VueLoaderPlugin } = require('vue-loader')
  // 或者
  const VueLoaderPlugin = require('vue-loader/lib/plugin');

  // ...
  plugins: [
    new VueLoaderPlugin()
  ]

⑤ TypeError: this.getOptions is not a function

经过排查发现是由于style-loader的版本不兼容导致的，webpack4 可用的 css 文件的 loader 对应最高版本如下：

  "css-loader": "^5.2.7",
  "style-loader": "^2.0.0",
  "less-loader": "^7.3.0",

⑥ [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"

项目中使用 element-ui ，依赖升级后，el-date-picker 出现以下告警信息， 将element-ui 升级至2.15.8

  npm uninstall element-ui
  npm install element-ui@2.15.8 -s