Angular 14自定义Webpack构建器下assets目录文件替换失效问题咨询

问题原因分析 #

首先得明确：fileReplacements 配置只对被Webpack作为模块解析的文件生效（比如你通过import引入的.ts/.js文件），而src/assets目录下的文件是由Angular的Assets处理流程直接复制到输出目录的，这个过程完全绕开了Webpack的模块解析环节，所以你在test配置里加的fileReplacements对这个assets文件根本不起作用——这就是为什么替换后文件还是空的原因。

另外你提到加了CopyWebpackPlugin却被覆盖，这是因为Angular的Assets复制步骤的执行顺序在你的自定义Webpack插件之后：Angular先执行了你的CopyWebpackPlugin复制测试文件，然后又把src/assets下的空文件复制过去覆盖了它。

Angular构建流程（针对你的场景） #

给你梳理下关键环节的顺序，帮你理解为什么会出现这个问题：

• 首先处理fileReplacements：但仅作用于被Webpack识别为模块的文件（比如代码里import的文件），对assets目录下的静态文件完全不处理
• 按angular.json中assets数组的顺序，依次复制每个配置的资源到输出目录
• 执行Webpack编译流程，包括你自定义Webpack配置里的插件（比如CopyWebpackPlugin）

（这里注意：如果你的自定义Webpack插件是在Webpack的emit阶段执行复制，而Angular的Assets复制是在更早的阶段，就会出现插件复制的文件被Angular的Assets覆盖的情况，反之亦然）

解决方案 #

有两种简洁有效的方法可以解决这个问题，优先推荐第一种：

方案1：修改Angular的Assets配置（无需自定义Webpack）

直接在test配置的assets数组里调整顺序，让测试配置文件的复制覆盖原有的空文件：

"configurations": {
  "test": {
    "assets": [
      "src/favicon.ico",
      // 先复制整个src/assets目录（包括空的placeholder）
      "src/assets",
      // 再复制测试配置文件，并重命名为目标文件名，覆盖之前的空文件
      {
        "glob": "aws-rum.test.js",
        "input": "src/aws-rum-configs",
        "output": "assets",
        "rename": "aws-rum-config.js"
      }
    ],
    "customWebpackConfig": {
      "path": "webpack.config.test.js"
    }
  }
}

Angular的Assets处理是严格按照数组顺序执行的，后面的复制操作会覆盖输出目录中同名的文件，这样就能确保最终输出的是你的测试配置文件。

方案2：排除原文件，用自定义Webpack插件复制

如果你更倾向于用Webpack插件来处理，可以先把原空文件从Assets复制中排除，再用CopyWebpackPlugin复制测试文件：

1. 先修改test配置的assets，排除要替换的文件：

"assets": [
  "src/favicon.ico",
  {
    "glob": "**/*",
    "input": "src/assets",
    "ignore": ["aws-rum-config.js"] // 排除空的placeholder
  }
]

2. 然后在webpack.config.test.js中配置CopyWebpackPlugin：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/aws-rum-configs/aws-rum.test.js',
          to: 'assets/aws-rum-config.js' // 直接复制到目标路径
        }
      ]
    })
  ]
};

这种方式避免了Angular Assets复制原文件，Webpack插件复制的测试文件就不会被覆盖了。

额外提示 #

如果你的配置文件是需要在代码中引入的，也可以把它改成模块引入的方式（比如在某个.ts文件里import '../assets/aws-rum-config.js'），这样fileReplacements就会生效——因为此时这个文件会被Webpack作为模块解析，fileReplacements的替换逻辑就会作用于它。不过从你的描述看，这个文件是独立的静态资源，所以方案1/2更适合你的场景。

内容来源于stack exchange