这个问题我之前踩过坑，核心原因其实和热模块替换（HMR）的机制冲突有关，具体拆解一下：

1. 先搞懂三种哈希的本质差异 #

Webpack里的三种哈希各有作用，别搞混：

• [hash]：整个项目构建的全局哈希，只要项目里任何文件改动，这个哈希就会变
• [chunkhash]：单个代码块（chunk）的哈希，只有当前chunk里的文件改动，哈希才会变化
• [contenthash]：基于文件实际内容生成的哈希，是最精准的，只有文件内容真的变了才会更新

2. HMR和chunkhash/contenthash的冲突点 #

Webpack的HotModuleReplacementPlugin（HMR的核心插件）和[chunkhash]/[contenthash]是天生互斥的。原因很直白：
HMR的作用是开发时不用刷新页面，就能动态替换更新的模块。这种动态更新会让chunk的内容在运行时发生变化，而[chunkhash]/[contenthash]是基于chunk的静态构建内容生成的——动态变化的chunk根本没法生成稳定可靠的哈希值。所以Webpack直接禁止在启用HMR的配置里用这两种哈希。

3. 为什么Dev Server能正常跑？ #

因为Dev Server默认会自动启用HMR，但它在开发模式下会做特殊兼容：要么自动把[chunkhash]/[contenthash]替换成[hash]，要么直接跳过哈希的严格校验，优先保证开发流畅度。而你执行webpack build时一般是生产模式构建，Webpack会严格校验配置规则，这时候如果你的配置里同时存在HMR插件和[chunkhash]/[contenthash]的输出文件名，就会触发这个报错。

简单的解决思路 #

最稳妥的方式是区分开发和生产环境的配置：

• 开发环境（Dev Server）：用[hash]或者固定文件名（比如bundle.js），保留HMR配置
• 生产环境（build）：用[chunkhash]/[contenthash]，同时移除HotModuleReplacementPlugin相关配置

内容的提问来源于stack exchange，提问作者pizzae