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

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

简单“粗暴”的升级方式

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

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

对package.json所有的包进行统一升级，执行情况如下：

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

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

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

2. 第二个问题
   
   webpack.NamedModulesPlugin is not a constructor
   webpack包4.XX需要配置

new webpack.NamedModulesPlugin(),

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

3. 第三个问题
   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)