webpack输出文件名设置chunkhash时在开发环境报错问题的解决

webpack输出文件名设置chunkhash时在开发环境报错问题的解决

在webpack配置中，使用chunkhash代替hash可实现输出文件名中哈希值与模块内容挂钩，避免每次构建时输出文件名中哈希值都变更（即使文件文件内容没有发生任何变化）。在开发环境下，当输出文件名filename设置chunkhash时会出现如下报错：

原因：

报错中提示了我们使用hash就可以解决该问题，这是为什么呢？原因就是chunkhash不可以与开发环境下的热更新一起使用。

解决方法：

解决方法有两种，一种是保留热更新功能，根据环境变量来决定filename使用chunkhash还是hash；第二种是去掉热更新功能即可。

方法一：保留热更新

在开发环境下我们需要使用热更新来实现修改内容的实时刷新，热更新功能方便实用，但生产环境是不需要热更新的，因此通过根据npm脚本中的环境变量来区分开发与生产环境，以此来决定filename使用chunkhash还是hash。