Webpack 5生产构建时Angular 12项目组件模板图片未复制到dist文件夹

根因说明 #

生产环境使用的@ngtools/webpack配套的AngularWebpackPlugin默认开启了directTemplateLoading配置，会直接加载处理Angular组件的HTML模板，跳过了公共配置中声明的html-loader，导致模板内的图片路径没有被解析，无法触发Webpack 5的asset/resource规则处理，因此图片不会被复制到dist目录，路径也保留了原始源码路径。
开发环境使用angular2-template-loader处理组件模板，会将模板内容交给html-loader解析，因此路径和资源处理正常。

修复步骤 #

步骤1：修改生产环境AngularWebpackPlugin配置 #

在webpack-prod.js的AngularWebpackPlugin配置中新增directTemplateLoading: false，关闭插件直接加载模板的逻辑，将模板交给Webpack的loader链处理：

// webpack-prod.js plugins配置
plugins: [                   
  new AngularWebpackPlugin({
    tsconfig: './tsconfig.json',
    directTemplateLoading: false // 新增该行
  })
]

步骤2：显式配置html-loader的资源解析规则（可选，建议配置） #

在webpack-common.js的html-loader配置中显式开启资源路径解析，确保所有模板内的静态资源路径都会被识别处理：

// webpack-common.js html规则配置
{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        sources: true, // 开启解析img标签src等资源路径
        minimize: process.env.NODE_ENV === 'production' // 生产环境自动压缩HTML
      }
    }
  ]
}

修改完成后重新执行生产构建，模板内的图片就会被asset/resource规则捕获，复制到dist/assets目录下，同时路径会被自动替换为正确的打包后路径。

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