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中分离出来了。所以需要单独下载
两种升级方法：
-
npm update package@version -D （需要区分是生产依赖还是开发依赖）
-
将要下载的版本写进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 [email protected] [email protected] [email protected] -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 [email protected] [email protected] -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 [email protected] -s
