webpack4升级到webpack5在项目中尝试落地探索

最新推荐文章于 2024-12-17 15:42:18 发布

糯米麻糖

最新推荐文章于 2024-12-17 15:42:18 发布

阅读量917

点赞数

分类专栏：问题记录前端文章标签： webpack

本文链接：https://blog.youkuaiyun.com/gkf6104/article/details/117249418

版权

问题记录同时被 2 个专栏收录

21 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

有些老项目的包长时间没有更新，导致项目中有些性能问题，在项目迭代中考虑升级包，开始查找相关资料；

简单“粗暴”的升级方式

当然包升级后带来的一些问题，需要更全面的思考，此处先省略…
直接进入主题：
npm包升级工具：
npm-check-updates
npm-check
在本地执行安装命令如下：

npm install -g npm-check-updates
// 升级npm包
ncu -u

对package.json所有的包进行统一升级，执行情况如下：
在这里插入图片描述

包安装升级完成，但是项目跑不起来。。

首先第一个问题来了
仔细查看错误信息，是webpack报错了；
看了下，之前的webpack包版本是4.12.0，升级后包版本5.37.1
查看webpack官方升级版本说明后，是因为启动方式发生了变化，

// 之前的命令
webpack-dev-server XXX
//新版本
webpack serve

第二个问题

webpack.NamedModulesPlugin is not a constructor
webpack包4.XX需要配置

new webpack.NamedModulesPlugin(),

webpack 5默认内置了该配置功能，不需要再配置

第三个问题
webpack版本4.12.0

webpack版本5，对象形式获取

第四个问题

找了很多网上资料，应该是webpack5的问题，但不确定，卡在了这一步，没有进行下去；
由于时间关系，暂时先不做升级，后续有时间再继续

解决方案：项目搜索request.indexOf发现在你node_modules中的webpack-require-http包中有用到
查看webpack打包配置中有

externals: [
 require("webpack-require-http"), //支持require 线上地址资源
],
``
删除后，错误消失

# 优雅细致的升级方式

npm install -g npm-check
// 查看选择升级包
npm-check -u

选择相应版本升级
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210525101242298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2drZjYxMDQ=,size_16,color_FFFFFF,t_70)