我正在使用Webpack的[hash]来缓存破坏区域设置文件。但我还需要硬编码的区域设置文件路径,从浏览器加载它。由于文件路径是用[hash]改变的,我需要注入这个值来获得正确的路径。
我不知道如何在配置中以编程方式获取Webpack [hash]值,以便使用WebpackDefinePlugin注入它。
module.exports = (env) => {
return {
entry: 'app/main.js',
output: {
filename: '[name].[hash].js'
}
...
plugins: [
new webpack.DefinePlugin({
HASH: ***???***
})
]
}
}
7条答案
按热度按时间ibps3vxo1#
如果你想将哈希值转储到一个文件中,并将其加载到服务器的代码中,你可以在
webpack.config.js
中定义以下插件:输出
meta.json
文件的示例内容:我刚刚为这个插件创建了一个dumpmeta-webpack-plugin包。你可以使用它来代替:
有关Stats对象的所有可用属性,请参阅Webpack documentation。
wqsoz72f2#
看起来这应该是一个基本的功能,但显然它不是那么简单。
您可以通过使用
wrapper-webpack-plugin
来实现您想要的功能。有点笨拙,但它工作-如果你不介意整个块被 Package 在一个匿名函数。或者,您可以在
header
选项中添加var BUILD_HASH = ...
,但如果它成为全局变量,则可能会导致问题。ioekq8ef3#
在服务器上,您可以通过阅读文件名(例如:web.bundle.f4771c44ee57573fabde.js)。
vh0rcniy4#
WebpackManifestPlugin在输出管理指南中被正式推荐。它将JSON写入输出目录,将输入文件名Map到输出文件名。然后,您可以将这些Map值注入到服务器模板中。
它与Dmitry的答案类似,除了Dmitry的似乎不支持多个块。
nuypyhwy5#
您可以使用
webpack.DefinePlugin
将版本传递给构建如果你有一个package.json的版本,你可以像这样提取它:
例如(我们将版本字符串化):
然后在你的javascript中,版本将是:
vfwfrxfs6#
这可以通过Webpack Stats Plugin来实现。它为您提供了漂亮整洁的输出文件,其中包含您想要的所有数据。而且很容易将其合并到需要的webpack配置文件中。
例如,获取Webpack生成的哈希并在其他地方使用。可以实现如下:
repo中的更多用法示例
希望有帮助!
vsnjm48y7#
可以使用https://www.npmjs.com/package/build-hash-webpack-plugin:
输出是一个JSON对象,格式如下: