Angular 11 CLI项目中给构建后JS脚本加自定义属性失败求助

可行，但你的配置存在核心问题，调整后即可生效：

1. 移除多余的HtmlWebpackPlugin实例 #

Angular CLI会自动注入用于处理index.html的HtmlWebpackPlugin实例，你手动添加的新实例会脱离Angular的构建流程，导致ScriptExtHtmlWebpackPlugin无法作用到正确的页面生成过程上。

修改你的config/webpack.dev.js配置，删除new HtmlWebpackPlugin()：

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
module.exports = {
    plugins: [
        new ScriptExtHtmlWebpackPlugin({
            custom: {
                test: /\.js$/,
                attribute: 'data-ot-ignore'
            }
        })
    ]
};

2. 确认Angular CLI的Builder配置正确 #

确保angular.json中build和serve阶段的builder已替换为@angular-builders/custom-webpack系列，否则自定义Webpack配置不会被加载：

比如angular.json中的关键配置片段：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:build",
    "options": {
      "customWebpackConfig": {
        "path": "config/webpack.prod.js",
        "replaceDuplicatePlugins": false
      },
      // 保留原有其他配置（outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "config/webpack.dev.js",
        "replaceDuplicatePlugins": false
      },
      // 保留原有其他配置
    }
  }
}

3. 同步生产环境配置（可选） #

如果需要生产构建（ng build）也生效，需要将上述Webpack配置同步到config/webpack.prod.js中，并确保angular.json的build阶段指向该文件。

验证 #

运行ng serve启动开发服务器，或ng build执行生产构建，查看生成的index.html文件，所有JS脚本标签应已添加data-ot-ignore属性。

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