通过patch-package给node_modules依赖打补丁

今天开发项目时，我把项目由webpack4，升级到了webpack5，一切都很正常，但打包时发现遇到个问题，

我们项目用到了webpack-upload-plugin,这个依赖可以把资源上传cdn，并返回资源替换原始路径，然而升级到webpack5以后就不能正常使用了，debug后发现webpack5中移除了对asset.existsAt属性，所以插件获取不到资源的原始绝对路径。怎么办呢？ 想了三种方法：

1. fork作者的代码到自己仓库，修改后，从自己仓库安装这个插件。
2. 下载作者代码到本地，放在src目录，修改后手动引入。
3. 提issue或者mr，等待作者修改
4. 通过给这个node_modules依赖打补丁

今天主要介绍第四种，通过给依赖打补丁的方式，可以简单快捷的实现我们的效果，并且不会遇到升级包或更换包带来的各种兼容性问题。解决过程如下：

1. 添加patch-package依赖

npm i patch-package -D 

2.直接修改依赖包中的代码并保存

直接找到项目node_modules中关于webpack-upload-plugin的源码，node_modules/webpack-upload-plugin/index.js，修改源码，更换获取绝对路径的方式：

 // webpack 5中移除了.existsAt方法，所以使用compilation.getPath来获取asset的绝对路径；
const location = path.resolve(outputPath, compilation.getPath(name, { relative: false }));

3. 创建补丁

npx patch-package webpack-upload-plugin

之后会在项目根目录下创建patches目录，其中有我们创建的补丁，文件名格式为package-name+version.patch，如下所示:

这个文件里记录了，补丁的改动内容。

4. 在package.json文件中添加postinstall项

"scripts": {
  "postinstall": "patch-package"
  ...
}

至此，补丁生成成功。依赖修改版本需要重打补丁，重新安装同一版则不需要。