记录一次webpack3升级到webpack4过程

最新推荐文章于 2024-04-29 11:39:11 发布

weixin_30868855

最新推荐文章于 2024-04-29 11:39:11 发布

阅读量316

点赞数

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/zhensg123/p/11412679.html

版权

升级之前也参考了一些网上的教程。借鉴之，进行的自己的升级。一些版本为什么设为那个版本号也是参考别人的结果。

整体是按照先升级npm run dev；在升级npm run build的顺序。

首先升级webpack，在package.json文件中将webpack版本号修改为4.8.1。

    "webpack": "^4.8.1",

　　之后npm run dev，报错

解决的办法是

"webpack-dev-server": "^3.1.4",

　继续npm run dev

很明显这是没有安装webpack-cli，安装webpack

"webpack-cli": "^3.3.7",

　继续npm run dev

因为项目运用了DllReferencePlugin，升级之后需要重新生成dll文件。之后因为webpack4自身已经移除了uglifyjsplugin所以不能用了，改用下面插件进行代码压缩。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

　　修复后，npm run dev

解决方案升级 html-webpack-plugin

"html-webpack-plugin": "^3.2.0",

webpack4 需要使用vue-loader 15.0.0 至少。所以升级vue-loader

"vue-loader": "^15.0.10",

　注意vue-loader需要以插件的形式写在webpack配置项plugin里面。

const { VueLoaderPlugin } = require('vue-loader')
webpack:{
  ....,
 plugins: [
    new VueLoaderPlugin(),
    .....
   ]
}

　ok,npm run dev升级完毕。

注意这里版本号虽然，如上来写，但需要刘杰"^"这个符号的意义，意义是大版本号不变，中间版本号会自动下载最新的。还有一个符号"~",是只小版号变化。

然后升级npm run build。

webpack 4 不能再用extract-text-webpack-plugin，大多数教程推荐使用mini-css-extract-plugin，这个可以百度。用这个插件替换build环境的extract-text-webpack-plugin即可。

其他：升级过程中还出现的问题有

这是因为eslint需要升级，升级到eslint-loader

 "eslint-loader": "^2.0.0",

这是因为使用了elment-ui，当升级到2.11.x时候会出现这个错误，这个错误最终没有解决，只有降级element-ui版本。

转载于:https://www.cnblogs.com/zhensg123/p/11412679.html

关注