Webpack4 远程发布出现的 chunkhash 不一致问题解决方案！

前言

在前端项目开发过程中，Webpack 是常用的功能强大的打包工具。Webpack4 相较于前几个版本来说，性能更加优化、体积更小、速度更快。但是在实际的生产环境中，我们可能需要将打包好的文件上传到远程服务器，这时就有可能出现 chunkhash 不一致的问题。

chunkhash 不一致的原因

Webpack 在使用 hash 进行文件名命名时，得到的值是根据以下条件进行计算的：

• 文件的内容
• Webpack 配置相关
• 引用该文件的父级文件

如果这些条件任意一个发生了变化，那么文件名的 hash 值就会发生变化。

在本地开发的环境下，每次打包的内容总是相同的，因为内容都没有改变过。但是在远程服务器的环境下，由于每个服务器的文件系统和部署环境都不同，部署完成的时候，如果 hash 值不同，就会出现无法找到文件等问题。

问题的解决方案

解决这个问题的方法就是在 Webpack 的配置文件中修改文件名的生成规则，以使得远程服务器上的文件名能够与本地打包结果一致。在调研了一些资料后，可以通过如下两种方式实现：

第一种方案：不使用 hash

通过设置 output 的 filename 选项为 [name].[ext]，可以让 Webpack 不再使用 hash 作为文件名的一部分。这个做法在开发阶段很常见，但在生产环境中，这样做显然是不合理的，因为缓存有效期很长，而这样做可能导致用户无法获取新的文件。

第二种方案：使用相同的 hash 算法

Webpack 在每次打包的时候，会根据 output 中的 chunkFilename 选项生成 hash 值。通过设置 chunkFilename 的值为相同内容，可以保证每个服务器上的文件的 hash 值相同。以下是一个示例：

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js',
},

在这个示例中，每次打包的文件名都是由文件的名称和其 hash 值组成的，相比第一种方案，这样做就不会影响用户的缓存，同时可以保证每个服务器上的文件名是一致的。

总结

在本文中，我们解决了 Webpack4 远程发布出现的 chunkhash 不一致问题，并提出了两种解决方案。不使用 hash 可能导致用户无法及时获取新版本的文件，所以第二种方法更为恰当。

不管是使用哪种方案，都需要结合实际情况来做出选择，同时根据该方案进行合理的缓存策略。只有兼顾用户体验和生产环境的需求，才是最优解。

参考资料

webpack 的输出文件名

Webpack 4: Contenthash for long term caching

Hash vs Chunkhash vs Contenthash－文件名哈希策略

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba27a6add4f0e0ff2b7481