Angular项目中如何更新Webpack内文件，让库修改生效？

问题根源 #

直接修改node_modules内的依赖文件不具备持久性——npm重装、依赖更新、Angular内置Webpack的编译缓存都会覆盖你的修改，ng serve默认会缓存编译后的依赖代码，导致旧逻辑一直被调用。

具体解决办法 #

1. 强制清除缓存并重启服务 #

执行以下命令彻底清理各类缓存，重新构建依赖：

# 清除Angular CLI的所有缓存
ng cache clean --all

# 清除npm缓存
npm cache clean --force

# 删除现有依赖和锁文件，重新安装
rm -rf node_modules package-lock.json
npm install

# 禁用缓存启动开发服务
ng serve --no-cache

2. 使用补丁工具永久保存修改（推荐方案） #

通过patch-package工具给依赖打永久补丁，避免每次重装依赖都要手动修改：

• 安装补丁工具：

  npm install patch-package --save-dev
  

• 在package.json的scripts字段中添加自动补全脚本：

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

• 重新修改node_modules/leaflet-easybutton/src/easy-button.js的内容到你需要的状态
• 生成补丁文件：

  npx patch-package leaflet-easybutton
  

  项目根目录会生成patches/leaflet-easybutton+[对应版本号].patch文件，将其提交到版本控制
• 后续重装依赖时，postinstall脚本会自动将补丁应用到依赖包，无需再次手动修改

3. 本地引入修改后的文件 #

将修改好的easy-button.js复制到项目本地目录（例如src/assets/js/），替换原有依赖引用：

• 打开angular.json，找到build配置下的scripts数组，替换路径：

  "scripts": [
    // 注释掉原node_modules路径
    // "node_modules/leaflet-easybutton/src/easy-button.js",
    "src/assets/js/easy-button.js"
  ]
  

• 重启ng serve即可生效

内容的提问来源于stack exchange，提问作者Moa