如何通过HtmlWebpackPlugin在所有打包脚本后添加指定脚本？

方法一：手动控制模板中的脚本注入位置（最直接可靠） #

这种方式通过修改public/index.html模板，手动指定打包脚本和自定义脚本的顺序，需要关闭HtmlWebpackPlugin的自动注入功能：

1. 修改public/index.html模板，替换原有自定义脚本位置，加入打包脚本的手动注入占位符：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 手动注入所有打包生成的脚本 -->
    <%= htmlWebpackPlugin.files.js.map(js => `<script src="${js}"></script>`).join('') %>
    <!-- 你的自定义脚本放在打包脚本之后 -->
    <script src="/tflex-viewer/tflex-viewer3d-widget.js"></script>
  </body>
</html>

2. 在webpack配置中修改HtmlWebpackPlugin的inject选项为false，关闭自动注入：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他webpack配置（entry、module等）
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: false, // 禁用自动注入，使用模板中的手动占位符
      filename: 'index.html' // 生成的文件名，默认就是index.html
    })
  ]
};

方法二：使用HtmlWebpackPlugin钩子修改生成的HTML（无需修改模板） #

如果不想改动原模板，可以利用HtmlWebpackPlugin的afterTemplateExecution钩子（v5及以上版本支持），在HTML生成后插入自定义脚本到打包脚本之后：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      // 保持默认inject配置（比如默认值'body'，会将打包脚本注入到body末尾）
    }),
    // 自定义插件处理HTML内容
    {
      apply: (compiler) => {
        compiler.hooks.compilation.tap('CustomScriptPlacementPlugin', (compilation) => {
          HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync(
            'AppendCustomScriptHook',
            (data, callback) => {
              const customScript = '<script src="/tflex-viewer/tflex-viewer3d-widget.js"></script>';
              // 先移除模板中已有的自定义脚本（避免重复）
              let updatedHtml = data.html.replace(customScript, '');
              // 找到最后一个<script>标签的位置，插入自定义脚本
              const lastScriptEnd = updatedHtml.lastIndexOf('</script>');
              if (lastScriptEnd !== -1) {
                updatedHtml = [
                  updatedHtml.slice(0, lastScriptEnd + 9),
                  '\n' + customScript,
                  updatedHtml.slice(lastScriptEnd + 9)
                ].join('');
              } else {
                // 若没有脚本标签，直接插入到body结束标签前
                const bodyEnd = updatedHtml.lastIndexOf('</body>');
                if (bodyEnd !== -1) {
                  updatedHtml = updatedHtml.slice(0, bodyEnd) + '\n' + customScript + updatedHtml.slice(bodyEnd);
                }
              }
              data.html = updatedHtml;
              callback(null, data);
            }
          );
        });
      }
    }
  ]
};

关于templateParameters未生效的说明 #

templateParameters主要用于向模板传递自定义变量，它不会改变HtmlWebpackPlugin默认的脚本注入逻辑。如果你的配置中inject仍为默认值（true或'body'），插件依然会自动将打包脚本插入到默认位置，导致你的自定义脚本无法按预期排序。

内容的提问来源于stack exchange，提问作者Георгий Барсегян