webpack3升级到webpack4踩坑

2020-8-23 10:00:13 460 views

webpack3升级到webpack4踩坑

alt

升级原因

由于项目比较老,项目的打包和编译速度都很慢,遂将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',
       },
     ]
   }
 } 

最后生效的配置

转载请标明出处

https://www.suanliutudousi.com

1

No Comments

发表评论

邮箱地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。