Angular11升级12后更新@angular-builders/custom-webpack报找不到webpack错误

根因说明 #

该异常本质是@angular-builders/custom-webpack@12的peer依赖声明要求可直接访问的webpack实例，但Angular 12将webpack作为@angular-devkit/build-angular的嵌套依赖管理，默认不会提升到node_modules根目录，导致custom-webpack加载失败。

无需删除package-lock.json的可行方案 #

• 方案1：使用npm 7+的peer依赖自动补全特性
  执行命令 npm install --legacy-peer-deps=false，npm会自动补全custom-webpack缺失的peer依赖，仅新增缺失的webpack相关条目，不会修改lock文件中其他已锁定的包版本。如果不想修改全局配置，可单次执行命令：npm install --peer-deps
• 方案2：手动安装和Angular内置版本一致的webpack
  先执行命令 npm ls webpack 查看当前Angular内置的webpack版本，找到@angular-devkit/build-angular依赖的webpack具体版本号（例如5.30.0），再执行 npm install --save-dev webpack@<匹配的版本号> 即可。手动安装完全对齐的版本不会出现依赖冲突，也不会改动lock文件的其他内容。
• 方案3：配置npm依赖提升规则
  在项目根目录的.npmrc文件中添加配置：hoistPattern[]=webpack，强制npm将Angular内置的webpack提升到node_modules根目录，保存后执行npm install即可生效，无需修改package.json或lock文件的已有内容。

验证步骤 #

操作完成后先执行npm ls webpack确认没有版本冲突报错，再运行ng serve验证服务启动正常。

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