Javascript 如何将Webpack构建哈希注入应用程序代码

我正在使用Webpack的[hash]来破坏缓存区域设置文件。但我还需要硬编码区域设置文件路径，以便从浏览器加载它。由于文件路径是用[hash]修改的，所以我需要注入这个值以获得正确的路径

我不知道如何在配置中以编程方式获取Webpack[hash]值，以便使用WebpackDefinePlugin注入它

module.exports = (env) => {
  return {
   entry: 'app/main.js',
   output: {
      filename: '[name].[hash].js'
   }
   ...
   plugins: [
      new webpack.DefinePlugin({
         HASH: ***???***
      })
   ]
  }
}

---

您可以使用

如果您有一个具有版本的package.json，您可以按如下方式提取它：

const version = require("./package.json").version;

例如（我们严格化了版本）：

然后在您的javascript中，该版本将以以下形式提供：

process.env.VERSION

---

看起来它应该是一个基本功能，但显然它不是那么简单

你可以通过使用来完成你想要的

插件：[
新包装器插件({
标头：'（函数（BUILD_HASH）{'，
页脚：函数（文件名）{
常数rx=/^.+？\（[a-z0-9]+）\.js$/；
const hash=fileName.match（rx）[1]；
返回`}）（'${hash}'）；`；
},
})
]

有点骇客，但它的工作-如果你不介意整个区块包装在一个匿名函数。 或者，您可以只在

标题

选项中添加

var BUILD\u HASH=…

，但如果它成为全局变量，则可能会导致问题

---

不久前我创建了这个插件，我将尝试更新它，使其自然提供块散列。

在服务器上，您可以通过读取捆绑文件夹中的文件名（例如：web.bundle.f4771c44ee57573fabde.js）来获取散列。

如果您想将散列转储到文件并加载到服务器代码中，您可以在

webpack.config.js

中定义以下插件：

const fs=require（'fs'）；
MetaInfoPlugin类{
构造函数（选项）{
this.options={filename:'meta.json'，…options}；
}
应用（编译器）{
compiler.hooks.done.tap（this.constructor.name，stats=>{
常量元信息={
//如有必要，添加任何其他信息
hash:stats.hash
};
const json=json.stringify（metaInfo）；
返回新承诺（（解决、拒绝）=>{
writeFile（this.options.filename，json，'utf8'，错误=>{
如果（错误）{
拒绝（错误）；
返回；
}
解决（）；
});
});
});
}
}
module.exports={
//…您的网页包配置。。。
插件：[
//…其他插件。。。
新的MetaInfoPlugin（{filename:'dist/meta.json'}），
]
};

输出

meta.json

文件的示例内容：

{"hash":"64347f3b32969e10d80c"}

---

我刚刚为这个插件创建了一个包。所以你可以用它来代替：

const{DumpMetaPlugin}=require（'dumpmeta-webpack-plugin'）；
module.exports={
...
插件：[
...
新DumpMetaPlugin({
文件名：“dist/meta.json”，
准备：统计=>({
//添加您需要转储的任何其他信息
hash:stats.hash，
})
}),
]
}

有关Stats对象的所有可用属性，请参阅。

中正式建议使用。它将JSON写入输出目录，将输入文件名映射到输出文件名。然后，您可以将这些映射值注入到服务器模板中

---

这与Dmitry的答案类似，只是Dmitry似乎不支持多个块。

我得到的

版本在构建时未定义。在哪里定义了
version
？我们从不在package.json中修改版本。我们有不同的版本控制方法。我不能直接注入散列？啊，像那样，对不起，我没有注意到。也许这个答案会有帮助？伟大的ExtendedAPIPlugin提供webpack_散列作为全局变量。谢谢但是我想知道有多少这样的变量被注入到我的代码中；webpack\u哈希和webpack\u chunkname。来源：谢谢你的回答。我使用ExtendedAPIPlugin实现了它，它为我提供了一个全局变量webpack_hash.Druganor，多亏了它，我最终像这样将元数据写入了一个文件。我需要chunk.name->chunk.renderedHash映射。stats.compilation.chunks.forEach（chunk=>{metaInfoObject[chunk.name]=chunk.renderdhash}）是的，+1，归根结底，这是一个非常实用、易于理解的解决方案，不涉及任何神奇或晦涩的网页包配置。接下来，在Webpack v5的帮助下，您可以在Webpack 4的运行时将哈希和块名称作为全局变量获取（有关从v4迁移到v5的详细信息，请参阅主题：）
{"hash":"64347f3b32969e10d80c"}