升级Angular12后使用require加载png图片出现Module parse failed错误

• Angular 12对@angular-devkit/build-angular的内置webpack配置做了破坏性更新，移除了旧版默认支持的require语法引入非代码类静态资源（比如图片、字体等）的loader配置，webpack默认无法识别png这类二进制文件内容，所以直接抛出解析错误。
• 你当前项目的devDependencies中仅配置了ts、css相关loader，没有额外配置处理图片资源的loader，也会触发该报错。
• 补充说明：你在angular.json中已经配置了src/assets为静态资产目录，Angular会在打包时自动将该目录下所有文件原样复制到构建产物的对应路径下，本身不需要通过require引入这类静态资源。

以下方案优先级从高到低排列，可根据实际场景选择：

• 方案1（推荐，改动最小）：直接移除require语法，使用静态路径引用
  把原来的代码imgname= require("../assets/images/imgname.png");直接修改为imgname = 'assets/images/imgname.png'即可，Angular会自动映射到assets目录下的对应图片资源，无需额外配置。

• 方案2（适配动态引入需求）：改用ES模块import语法引入静态资源
  如果需要对图片资源做模块级的引入管理，可以把代码修改为：

import imgname from '../assets/images/imgname.png';

直接使用imgname变量作为资源路径即可，Angular 12原生支持该写法。

• 方案3（必须保留require语法时使用）：添加自定义webpack配置和图片loader

1. 安装对应依赖：

npm install file-loader @angular-builders/custom-webpack@12 --save-dev

2. 项目根目录新增custom-webpack.config.js文件，内容如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        use: ['file-loader']
      }
    ]
  }
}

3. 修改angular.json配置：
   找到projects.你的项目名.architect.build节点，把builder值修改为@angular-builders/custom-webpack:browser，并在options节点下新增配置：

"customWebpackConfig": {
  "path": "./custom-webpack.config.js"
}

再找到同项目下的architect.serve节点，把builder值修改为@angular-builders/custom-webpack:dev-server即可。

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