如何移除webpack生成的HTML文件中的指定资源引用（如sprite-library.js）

完全可以从webpack生成的HTML文件中移除指定资源条目，针对sprite-library.js引用残留的问题，有以下几种可直接落地的实现方案：

方案1：通过html-webpack-plugin原生配置过滤（优先推荐） #

绝大多数webpack项目都使用html-webpack-plugin生成最终HTML文件，直接在插件配置中排除对应chunk即可，不需要额外安装依赖：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其余webpack配置...
  plugins: [
    new HtmlWebpackPlugin({
      // 其余插件配置项...
      // 直接填写需要排除的入口chunk名称即可
      excludeChunks: ['sprite-library'],
      // 如果项目入口不多，也可以手动指定需要注入的chunk，从根源避免无关资源注入
      // chunks: ['main', 'other-required-entry']
    })
  ]
}

注意：配置里填写的sprite-library是webpack配置中entry字段对应的入口键名，不是最终生成的JS文件名，匹配后生成HTML时就不会自动注入该资源的script标签。

方案2：自定义渲染模板过滤资源 #

如果你使用自定义模板渲染HTML，可以直接在模板层遍历资源列表时过滤掉目标文件，以常用的EJS模板为例：

<!-- 自定义HTML模板文件 -->
<% htmlWebpackPlugin.files.js.forEach(jsPath => { %>
  <% if (!jsPath.includes('sprite-library.js')) { %>
    <script src="<%= jsPath %>"></script>
  <% } %>
<% }) %>

这种方式适合需要灵活控制资源注入逻辑的场景，不需要修改webpack插件配置，直接在模板层面筛除不需要的资源即可。

方案3：通过插件钩子精准移除标签 #

如果前两种方案因为其他插件的干扰不生效（比如你使用的SVG精灵插件是在html-webpack-plugin注入资源完成后才追加的script标签），可以写一个极简的内置插件，在HTML生成的最终阶段移除目标标签，兼容性最好：

// webpack.config.js 中直接添加自定义插件，无需额外依赖
plugins: [
  new HtmlWebpackPlugin(/* 原有配置 */),
  {
    apply: (compiler) => {
      compiler.hooks.compilation.tap('RemoveSpriteScriptPlugin', (compilation) => {
        HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
          'RemoveSpriteScriptPlugin',
          (data, cb) => {
            // 正则匹配目标script标签并替换为空
            data.html = data.html.replace(
              /<script[^>]*src=["']sprite-library\.js["'][^>]*><\/script>\s*/g,
              ''
            );
            cb(null, data);
          }
        )
      })
    }
  }
]

这种方式不受其他插件注入逻辑的影响，只要目标标签出现在最终生成的HTML内容里，就会被精准删除，不会残留。

方案4：文本替换插件处理 #

简单场景下也可以使用构建阶段的文本替换类插件，在文件输出前匹配到对应script代码段直接删除，实现逻辑和方案3一致，适合不想写自定义插件逻辑的场景。

优先选择方案1实现，配置成本最低，也不会出现误删其他资源的问题；如果因为第三方插件的注入逻辑导致配置不生效，直接使用方案3即可100%解决标签残留问题。

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