如果你使用 Webpack 打包前端项目，你一定会遇到这样的问题：Webpack 打包后，文件名带有哈希值，但是每次修改文件后，哈希值会改变，导致每个文件的 URL 都会改变。这给缓存文件和调试带来了很多麻烦。那么，如何解决这个问题呢？
解决方法
想要解决这个问题，我们需要在 Webpack 配置文件中进行修改。
Webpack 4 以上版本
在 Webpack 4 以上版本中，可以使用 contenthash 选项来生成稳定的哈希值。这个哈希值只会在文件内容发生改变时才会变化，保证了缓存的有效性。
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
}这里，[contenthash] 插值会在文件内容变化时产生新的哈希值。
Webpack 4 以下版本
在 Webpack 4 以下版本中，我们需要使用插件来生成稳定的哈希值。常见的插件有 hash-webpack-plugin 和 chunkhash-webpack-plugin。它们分别用于生成全局的哈希值和按照文件块生成的哈希值。
以下是使用 hash-webpack-plugin 的配置方法：
-- -------------------- ---- -------
----- ---------- - -------------------------------
-------------- - -
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ------------
------------- ------
----------- ---------
----------------- -
--
-
--这里，hash-webpack-plugin 插件用于生成全局的哈希值。hashFunction 选项指定哈希算法，hashDigest 选项指定编码方式，hashDigestLength 选项指定输出哈希值的长度，这些选项可以根据需要自行配置。
Tips
如果使用了服务端渲染，要保证客户端和服务端使用的是同样的文件名，你需要分别配置服务端和客户端的 Webpack。可以使用
webpack-merge等工具来保证客户端和服务端配置的同步。Webpack 的哈希值只作用于输出的文件名，如果你打包后的文件中引用了外部资源（比如 CSS、图片），这些资源的 URL 哈希值会改变，需要额外注意。
总结
Webpack 的哈希值用于保证缓存的有效性，但是每次文件修改后哈希值的变化会带来调试和缓存的麻烦，我们可以使用 contenthash 选项或插件来生成稳定的哈希值，从而解决这个问题。需要注意，哈希值只作用于输出的文件名，对于引用的外部资源需要额外处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520addb95b1f8cacd81cee8