So I'm trying to use a custom webpack config in my Angular 10.x app where I want to remove 'data-test' attributes from my templates during compilation, so the production code does not contain any e2e selector references. For this, I'm using the custom webpack builder (https://www.npmjs.com/package/@angular-builders/custom-webpack) with a custom webpack config. I'm loading the config in the angular.json like this:

    "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.ts",
              "mergeStrategies": {
                "externals": "append"
              }
            },

And the webpack config looks like this:

import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
import { EnvironmentType, getEnumValues } from '@enum-package/core/enumeration';
import * as webpack from 'webpack';

export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => {
  const env: EnvironmentType =
    <EnvironmentType>(
      getEnumValues(EnvironmentType).find(environmentType =>
        targetOptions.configuration?.toLowerCase().includes(environmentType.toLowerCase()),
      )
    ) ?? EnvironmentType.DEVELOPMENT;

  if (config.module?.rules) {
    // Remove E2E testing attributes from production code
    if (env === EnvironmentType.PRODUCTION) {
      const testSelectorRegex = new RegExp(/data-test="(.*)"|@HostBinding\('attr.data-test'\)(.*);/g);
      config.module.rules.push({
        test: /\.(js|ts|html)$/,
        enforce: 'pre',
        loader: 'string-replace-loader',
        options: {
          search: testSelectorRegex.source,
          replace: match => {
            console.log(`Replace E2E selector '${match}'.`);
            return ' ';
          },
          flags: 'g',
        },
      });
    }
  }

  return config;
};

The search-replace-loader package (https://www.npmjs.com/package/string-replace-loader) is what takes care of replacing the actual attributes from the templates. While running the ng build command, I can actually see that the replace itself works, since the Replace E2E selector '${match}'. is actually running and I can see the tags that I want to remove being logged during compilation.

For some reason when running the app from the dist folder after compilation, the tags are still in place when I inspect the DOM in my browser.

Am I missing something? Is there a build step before or after running this webpack loader that does not use the replaced source code? Does this have anything to do with the Ivy build engine that we're using?