如何使webpack在多个构建中生成一致的哈希值

时间:2017-03-22 15:09:36

标签: deployment webpack asset-finger-printing

背景

在Webpack配置中,您可以像[name]-[hash].js中一样为发出的文件指定命名约定。我将此与html-webpack-plugin结合使用以生成.html.erb部分,以便在Rails应用中使用,以在部署时包含正确的资产。每个Webpack构建都会在文件名中生成一个独特的指纹,除了当你将应用程序扩展到多个服务器,其中Webpack是构建过程的一部分(每个服务器的全新构建)之外,它的工作效果很好。 Rails对预编译资产进行类似的指纹识别。

github.css
** becomes **
github-448c90f2e2f181cd43b943786ee6f.css

问题

由于应用程序扩展到负载均衡器后面的多个服务器(使用Elastic Beanstalk),因此每个部署的构建必须完全相同。由于Webpack为每个构建生成一个唯一的哈希,我们在页面加载时会得到404,因为生成的资源不同步。

问题

有没有人想出如何在多个版本中获得相同的哈希?可能基于git commit hash?这就是我的想法,但许多搜索都没有产生任何结果。不是自己建造它。

2 个答案:

答案 0 :(得分:0)

我遇到了与Kyle相同的问题:将Elastic Beanstalk与多个服务器一起使用,每个使用Webpack的服务器都会生成不同的哈希。

首先,我尝试使用[contenthash]。我认为这会行得通,因为与[hash]不同,它基于the content of a file.,但没有用。我的怀疑是每个服务器都使用不同的盐。

我认为您可以通过用output.hashSalt指定盐来解决此问题,但是由于尚未消除在文件名中使用散列的需要,因此我尚未对此进行测试。

答案 1 :(得分:-1)

散列是确定性的,只要包含文件的内容相同,散列也是一样的。这还包括依赖项,因此拥有完全相同的依赖项非常重要。

Yarn使用yarn.lock文件来保证每次安装时安装的依赖项都是相同的,这使得每次在每台机器上完全相同的构建非常简单。使用npm,您可以使用npm shrinkwrap来锁定依赖项的版本,但这通常非常繁琐(Yarn创建的原因之一以及它使用锁文件的原因)。

您可能还想阅读官方文档的Guides - Caching