webpack3升级到webpack4踩坑
升级原因
由于项目比较老，项目的打包和编译速度都很慢，遂将webpack3升级到webpack4。
环境（webpack升级后相关）
"webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0",
遇到的问题
Error: Cannot find module 'webpack/bin/config-yargs' 版本
webpack4.0以上需要安装webpack-cli 通过安装webpack-dev-server3.0以上版本即可 "webpack-dev-server": "^3.11.0",
npm install webpack-dev-server@3.11.0 -D
TypeError: Cannot read property 'vue' of undefined
是vue-loader没有升级导致的,issue建议安装14.2.2。我这里安装的是15.9.3（会有新的坑）
相关issue
https://github.com/vuejs/vue-loader/issues/1177
安装15.9.3
npm install vue-loader@15.9.3 -D
File was processed with these loaders:
由于安装了15.9.3，15版本vue-loader做了一些变化
参考文档 https://vue-loader.vuejs.org/zh/migrating.html
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// …
plugins: [new VueLoaderPlugin()]
}
Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
多行文本省略号样式失效丢失， /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */
改成如下即可
/*! autoprefixer: ignore next */ -webkit-box-orient: vertical; /* autoprefixer: on */
vue-i18n 翻译没有生效
安装的依赖
npm install @kazupon/vue-i18n-loader@0.3.0 -D
@kazupon/vue-i18n-loader依赖在vue-loaderv15之后发生了变化，需要加如下
// for webpack.config.js (Without Vue CLI)
module.exports = {
module: {
rules: [
{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '@kazupon/vue-i18n-loader',
},
]
}
}
最后生效的配置
转载请标明出处
