前言

本文主要记录在开发过程中遇见的问题。

情景系列

hash 问题之 Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js'

• 情景

事发 Vue CLI 构建的项目，在执行 yarn serve 启动开发服务时报错： in [name].[chunkhash].js 、Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js' (use [hash] instead)。

事发前将 webpack 配置修改过，将 output.filename 和 output.chunkFilename 规则修改为 [name].[contenthash].js。

• 原因

因为本地服务 webpack-dev-server 启用了 HotModuleReplacementPlugin 热更新，

而热更新恰恰与配置的 chunkhash 或 contenthash 有冲突。

所以只能在生产环境（production）下使用 chunkhash 或 contenthash ,

在开发环境应改用为 hash 替代。

• 解决

1. 方法一：使用 chunkhash 或 contenthash 时，关闭HotModuleReplacementPlugin 热更新插件

2. 方法二：根据 process.env.NODE_ENV 环境变量来选择是否使用 chunkhash 或 contenthash, 还是使用 hash 。

以 Vue 的 vue.config.js 为例，修改 webpack 配置

// vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
  // ... 其他配置

  // 关键配置
  configureWebpack: {
    output: {
      filename: IS_PROD ? `[name]-[contenthash:8].js` : `[name].js`,
      chunkFilename: IS_PROD ? `[name]-[contenthash:8].js` : `[name].js`,
    },
  },
};