Webpack 4+Angular10 自定义webpack下string-replace-loader替换失效问题

你的配置失效和Ivy构建引擎直接相关，本质是loader执行顺序和Angular编译流程的匹配逻辑完全错了：

• Angular 10默认开启的Ivy引擎下，组件模板、TS装饰器（包括@HostBinding、组件内联/外链模板的静态属性）的编译逻辑由Angular自研的@ngtools/webpack loader负责，它会在普通webpack loader处理链路的更早阶段，就把所有模板语法、装饰器定义转换成Ivy专属的DOM渲染指令（比如ɵɵattribute("data-test", "xxx")这类运行时调用代码）。
• 你配置的enforce: 'pre'规则执行时机不对：要么你替换的是还没被Angular编译的原始源文件内容，但Angular编译器在这一步已经完成了模板到渲染函数的转换，后续构建流程根本不会用你替换后的原始内容；要么更直接——Angular 10版本的@ngtools/webpack读取外链.html模板时，是直接从磁盘读原始文件，完全不消费前置loader输出的内存中修改后的内容，你看到的替换日志只是证明loader匹配到了管道里的字符串，实际Angular编译用的还是磁盘上未修改的原文件，最终产物自然还会带data-test属性。
• 附加问题：你写的正则用了贪婪匹配，实际会把data-test属性后同标签的其他属性也一起误替换，不过这不是属性残留的核心原因。

不要尝试用普通字符串loader匹配原始ts、html源文件，直接针对Angular编译完成后的产物做替换，或者用Angular内置的优化能力：

方案1：Post阶段替换编译产物（兼容性最好，适配Angular 10所有小版本） #

删掉你之前写的匹配js/ts/html的pre规则，换成在所有编译步骤完成后，替换Angular生成的渲染指令代码：

// extra-webpack.config.ts 生产环境逻辑
if (env === EnvironmentType.PRODUCTION) {
  // 替换模板中静态定义的data-test属性
  config.module.rules.push({
    test: /\.(js|mjs)$/,
    enforce: 'post', // 等Angular所有编译、优化步骤完成后再执行
    loader: 'string-replace-loader',
    options: {
      search: /ɵɵattribute\(\s*["']data-test["'][^)]*\)/g,
      replace: 'void 0', // 把data-test的渲染调用替换为空操作
      flags: 'g'
    }
  });

  // 替换@HostBinding绑定的data-test属性
  config.module.rules.push({
    test: /\.(js|mjs)$/,
    enforce: 'post',
    loader: 'string-replace-loader',
    options: {
      search: /["']attr\.data-test["']\s*:\s*[^,}]*/g,
      replace: '"attr.data-test": undefined',
      flags: 'g'
    }
  });
}

方案2：用Angular内置优化配置（无额外依赖，适合小版本较新的Angular 10） #

如果你的项目生产环境默认开启了buildOptimizer，可以直接在angular.json的生产配置节点下添加属性剥离规则，不需要写自定义webpack逻辑：

"configurations": {
  "production": {
    // 其他原有生产配置...
    "optimization": {
      "scripts": true,
      "styles": true,
      "fonts": true,
      "scripts": {
        "removeAttributes": ["data-test"]
      }
    }
  }
}

注意：Angular 10的早期小版本没有开放这个配置项，如果加完构建报错直接回退用方案1即可。

构建完成后直接在dist目录的产物文件里全局搜索data-test关键字，如果搜不到相关代码，就说明配置生效，此时浏览器渲染的DOM不会再携带测试用的data-test属性。

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