Webpack外部模块优化报错：Angular生产构建buffer模块语法错误

• 项目升级后webpack外部依赖（externals）配置错误：Angular 13默认取消了Node核心模块的自动polyfill支持，你升级后的项目大概率保留了旧版本的自定义webpack配置，或是引入的第三方工具错误将buffer标记为外部依赖，且未指定对应的导入变量名，导致webpack生成代码时出现var = __webpack_require__(7555);的空变量声明语法错误。
• 依赖导入逻辑被干扰：amazon-cognito-identity-js内部依赖buffer模块，新建项目无额外webpack配置修改，webpack会正常处理ES模块导入，生成标准的/* harmony import */格式导入代码；升级后的项目额外配置干扰了该依赖的导入解析逻辑，才会出现异常代码。

1. 修正webpack externals配置
   如果项目使用了@angular-builders/custom-webpack等自定义构建工具，打开对应的webpack配置文件，查找externals字段，删除将buffer设为外部依赖的错误规则，或者补充正确的全局变量名声明：

// 错误配置示例，直接删除该行即可
externals: {
  'buffer': ''
}

2. 手动配置buffer polyfill
   Angular 13不会自动注入Node核心模块的polyfill，手动安装并配置buffer避免依赖缺失：

• 安装依赖：
  npm install buffer --save
• 在项目的src/polyfills.ts文件中添加如下代码：

declare global {
  interface Window {
    global: any;
  }
}
window.global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;

3. 清理angular.json错误配置
   打开angular.json，找到对应项目的build > options配置，检查externalDependencies列表，如果存在buffer项直接删除。

4. 清理缓存重新构建
   执行如下命令清除旧缓存后再执行生产构建：

# Windows环境可手动删除node_modules、package-lock.json、dist文件夹
rm -rf node_modules package-lock.json dist
npm install
ng build --configuration production --base-href

内容的提问来源于stack exchange，提问作者Dan-Dev