Webpack编译成功但浏览器加载失败，不想批量修改ES6导入语法

看起来你遇到的问题核心是ES6模块语法没有被Babel正确转译为Webpack能识别的CommonJS格式，所以直接用import会导致模块无法被__webpack_require__找到，但改用require就能正常工作——毕竟require是Webpack默认支持的CommonJS语法。下面是一步步的排查和解决方案：

1. 确认目标文件是否被Babel处理 #

首先检查报错的flashMessage.js是否在你Webpack配置的include目录里（client和./template）。如果这个文件在其他目录下，Babel根本没处理它，ES6的import语法自然不会被转译，Webpack也就无法正确加载模块。

解决方法：把flashMessage.js所在的目录添加到include数组中，比如：

include: [
  path.join(__dirname, 'client'),
  path.join(__dirname, './template'),
  path.join(__dirname, './path/to/flashMessage') // 新增这个目录
],

2. 检查Babel预设的兼容性和冗余配置 #

你的.babelrc里同时配置了es2015和latest预设，这会导致冗余甚至冲突——因为latest预设已经包含了es2015、es2016、es2017的内容，重复加载会干扰转译逻辑。

修改.babelrc，移除重复的预设，同时明确指定模块转换格式：

{
  "presets": [
    ["es2015", { "modules": "commonjs" }], // 明确转译为CommonJS
    "react",
    "stage-2"
  ],
  "plugins": ["react-hot-loader/babel"]
}

或者直接用latest替代es2015，保持配置简洁：

{
  "presets": [
    ["latest", { "modules": "commonjs" }],
    "react",
    "stage-2"
  ],
  "plugins": ["react-hot-loader/babel"]
}

3. 确保Webpack和Babel依赖版本兼容 #

不同版本的babel-loader对应不同版本的babel-core，版本不匹配会导致转译失效：

• babel-loader@7.x 需要搭配 babel-core@6.x（也就是你现在用的babel-preset-es2015这类旧预设）
• 如果不小心装了babel-loader@8.x，则需要升级到Babel 7（使用@babel/core、@babel/preset-env等新包）

你可以运行以下命令检查依赖版本：

npm list babel-core babel-loader babel-preset-es2015

如果版本不匹配，卸载重新安装对应版本：

npm uninstall babel-loader
npm install babel-loader@7.1.5 --save-dev

4. 替换Webpack配置中的query为options #

在Webpack 4及以上版本中，query参数已经被options替代，虽然旧版本还能兼容，但改用options可以避免潜在的配置识别问题：

{
  test: /\.(js|jsx)$/,
  include: [path.join(__dirname, 'client'), path.join(__dirname, './template')],
  loader: 'babel-loader',
  exclude: /node_modules/,
  options: { // 把query改成options
    cacheDirectory: true
  }
}

5. 检查模块导出和导入的匹配性 #

虽然你说改用require就正常，但还是要确认一下：如果模块用的是export const ADD_FLASH_MESSAGE = ...，导入时必须用import { ADD_FLASH_MESSAGE } from './xxx'；如果是export default，则用import xxx from './xxx'。如果导入方式和导出方式不匹配，也会导致读取属性时出现undefined错误。

按照以上步骤排查后，应该能解决ES6import无法被Webpack正确识别的问题，不用再逐个文件修改导入语法啦。

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