Office Add-in生产构建JS哈希文件名不一致致Azure部署JS缺失

问题场景 #

基于Node.js+TypeScript开发Office Add-in应用，开发模式运行正常，但生产模式构建后部署到Azure时，HTML文件中引用的JS哈希文件名与实际生成的JS文件哈希不匹配，导致部分JS库缺失；而开发模式构建部署无异常。

核心原因分析 #

你的Webpack配置存在两个关键问题，导致生产模式下哈希文件名不匹配：

1. Output文件名规则未明确配置
   生产模式下Webpack默认会启用内容哈希（contenthash）生成文件名，但你的output配置中未显式指定filename和chunkFilename规则。这会导致Webpack生成的JS文件名带哈希，但HtmlWebpackPlugin无法稳定同步哈希值，或构建过程中出现文件名生成逻辑不一致的情况。

2. 插件执行顺序不合理
   在plugins数组中，最后一个commands.html的HtmlWebpackPlugin实例放在了CopyWebpackPlugin之后。Webpack插件的执行顺序会影响资源注入时机，CopyWebpackPlugin的文件变换操作可能间接干扰HtmlWebpackPlugin的资源引用生成逻辑。

此外，生产模式下Webpack会启用代码压缩、Tree Shaking等优化，若没有明确的文件名规则，这些优化会进一步加剧哈希计算逻辑与开发模式的差异，导致文件名不匹配。

修复方案 #

1. 明确配置Output的文件名规则 #

在output中添加filename和chunkFilename，统一开发/生产模式的文件名生成逻辑（生产模式启用哈希）：

output: {
  devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]",
  clean: true,
  filename: dev ? "[name].js" : "[name].[contenthash].js",
  chunkFilename: dev ? "[id].js" : "[id].[contenthash].js",
  path: path.resolve(__dirname, "dist"), // 显式指定输出目录，避免歧义
},

2. 调整HtmlWebpackPlugin的执行顺序 #

将所有HtmlWebpackPlugin实例放在CopyWebpackPlugin之前，确保资源引用先正确注入HTML，再执行文件复制操作：

plugins: [
  new HtmlWebpackPlugin({
    filename: "taskpane.html",
    template: "./src/taskpane/taskpane.html",
    chunks: ["polyfill", "taskpane"],
  }),
  new HtmlWebpackPlugin({
    filename: "pms.html",
    template: "./src/taskpane/pms.html",
    chunks: ["polyfill", "pms"],
  }),
  new HtmlWebpackPlugin({
    filename: "tocpane.html",
    template: "./src/taskpane/tocpane.html",
    chunks: ["polyfill", "tocpane"],
  }),
  new HtmlWebpackPlugin({
    filename: "modelpane.html",
    template: "./src/taskpane/modelpane.html",
    chunks: ["polyfill", "modelpane"],
  }),
  new HtmlWebpackPlugin({
    filename: "dialog.html",
    template: "./src/dialogs/dialog.html",
    chunks: ["polyfill", "dialog"],
  }),
  new HtmlWebpackPlugin({
    filename: "commands.html",
    template: "./src/commands/commands.html",
    chunks: ["polyfill", "commands"],
  }),
  new CopyWebpackPlugin({
    patterns: [
      {
        from: "schema/*",
        to: "schema/[name][ext][query]",
      },
      {
        from: "assets/images/*",
        to: "assets/images/[name][ext][query]",
      },
      {
        from: "assets/css/jstree/default/*",
        to: "assets/css/jstree/default/[name][ext][query]",
      },
      {
        from: "manifest*.xml",
        to: "[name]" + "[ext]",
        transform(content) {
          if (dev) {
            return content;
          } else {
            return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
          }
        },
      },
    ],
  }),
],

3. 验证修复效果 #

• 执行生产构建后，检查dist目录下的JS文件名是否带有[contenthash]，同时确认HTML文件中script标签的src属性与实际文件名完全一致。
• 部署到Azure时，确保完整上传dist目录下的所有文件，无遗漏带哈希的JS文件。

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