webpack 科学修改 node_modules 某个包的部分文件为本地文件

需求总是千变万化，npm 不是万能的，node_modules 里面的文件也是需要维护的。

如果 npm install 安装了某个包，然而这个包里面部分文件不支持你的需求，这时候怎么办？

比如：https://github.com/svg/svgo 此包可以批量处理 svg 文件，但是是 nodejs 运行环境，如何做到在浏览器端运行？如： https://tiny.jijian.link 这个浏览器端的图片压缩神器。

方法一

直接修改 node_modules 文件，当然你得记得改了些啥，否则下次 npm install 文件就会被覆盖。

方法二

使用 patch-package 修改，还是不够完美，需要额外安装 patch-package，还需要执行各种命令。

详细阅读： https://blog.jijian.link/2020-07-23/webpack-alter-file/

方法三

使用 webpack alias 实现替换文件。此方法仅适用于 webpack 维护的项目。

alias 作用基本都知道，设置路径别名，可使用短路引入文件。

其实 alias 作用不仅于此，还能作用于 node_modules 中的文件。

比如： svgo/lib/svgo/tools.js 中 require('fs') 在浏览器端会导致 fs not found 错误，我们需要修改里面的代码，让其不报错。

方法：

1. 复制 svgo/lib/svgo/tools.js 到项目任意位置，修改里面代码，记住此处项目位置。
2. 修改 webpack 配置。
   其中 ../lib/svgo/tools 是 svgo 包里面的引用路径，src/svgo/lib/svgo/tools.js 是修改后的文件路径。
   

   chainWebpack: config => {  
     config.resolve.alias.set('../lib/svgo/tools', require('path').resolve(__dirname, 'src/svgo/lib/svgo/tools.js'));
     return config;
   },

总结

三种方法各有春秋，需根据需求选择。