Webpack启用ES6模块后HMR报错，如何禁用分块或解决问题？

1. 能否完全禁用分块生成？ #

可以通过以下配置强制Webpack只输出单个文件，彻底禁用所有分块：

module.exports = {
  // 你的基础配置...
  optimization: {
    splitChunks: false, // 关闭代码分割逻辑
    runtimeChunk: false // 禁止将runtime单独打包为chunk
  },
  entry: {
    main: './src/index.js' // 确保仅配置单一入口
  },
  output: {
    filename: '[name].js', // 使用固定文件名，避免chunk相关变量
    // 你的现有output配置...
  }
};

但这未必能解决HMR报错——Webpack的HMR机制目前对ES模块输出格式的支持存在功能缺口，即使单文件输出，HMR内部逻辑仍可能依赖不兼容的chunk处理流程。

2. 可行替代方案 #

方案一：开发/生产环境差异化配置 #

开发环境临时切换为兼容HMR的输出格式，生产环境保留ES模块配置：

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  experiments: {
    outputModule: isProduction
  },
  output: {
    library: {
      type: isProduction ? 'module' : 'umd' // 或其他支持HMR的格式
    }
  },
  // 其他配置...
};

这样开发阶段可正常使用HMR，生产环境输出符合要求的ES模块。

方案二：直接禁用HMR #

如果不需要热更新功能，可在配置中关闭HMR：

module.exports = {
  devServer: {
    hot: false
  }
};

或启动命令时添加参数：webpack serve --open --no-hot

方案三：等待官方修复 #

该报错属于Webpack已知的功能缺口——HMR模块尚未实现对ES模块chunk格式的支持，后续版本可能会修复此问题，可关注官方更新进度。

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