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;
   },

總結

三種方法各有春秋，需根據需求選擇。