升级Webpack后无法兼容ESM语法的问题求助

之前项目通过webpack.config.babel.js配合Babel配置实现ESM语法支持，原有配置如下：

原Babel配置（package.json） #

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [">1%", "last 4 versions", "not ie < 9"]
        },
        "useBuiltIns": "usage",
        "debug": false,
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

原启动脚本 #

"dev": "webpack serve --env --mode=development --config webpack/webpack.config.babel.js",

依赖版本：@babel/core ~7.12.3、webpack ^5.75.0，Node.js v21.6.2，旧版本下import语法可正常运行。

升级webpack至^5.90.3（同步升级webpack-cli、webpack-dev-server）后，改为webpack.config.js并在package.json中添加"type": "module"，但始终无法识别ESM语法，请求解决。

1. 明确ESM配置文件规则 #

启用"type": "module"后，Node.js会将所有.js文件按ESM解析，此时不能再使用.babel.js后缀——该后缀是给Babel转译CommonJS配置文件用的，ESM模式下Node不会自动触发Babel转译配置文件本身。

2. 修正启动脚本 #

确保脚本指向新的webpack.config.js：

"dev": "webpack serve --env --mode=development --config webpack/webpack.config.js",

3. 统一配置文件语法 #

将配置文件中的CommonJS语法全部替换为ESM：

• 把module.exports = {}改成export default {}
• 把require()改成import语句
• 如需使用__dirname，替换为：

  import { fileURLToPath } from 'url';
  import { dirname } from 'path';
  const __dirname = dirname(fileURLToPath(import.meta.url));
  

4. 分离Babel配置作用范围 #

package.json中的Babel配置会影响Node.js对所有.js文件的解析，建议将业务代码的Babel配置移到webpack.config.js的babel-loader选项中，避免干扰配置文件本身：

export default {
  // ...其他webpack配置
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { browsers: [">1%", "last 4 versions", "not ie < 9"] },
                useBuiltIns: 'usage',
                corejs: 3
              }],
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  }
};

5. 确保依赖版本兼容 #

webpack 5.90.x对配套工具版本要求严格，重新安装依赖避免版本冲突：

rm -rf node_modules package-lock.json
npm install

6. 调整webpack模块解析配置 #

在webpack.config.js中添加ESM相关解析规则：

export default {
  // ...其他配置
  resolve: {
    extensions: ['.js', '.jsx', '.mjs'],
    extensionAlias: {
      '.js': ['.js', '.mjs']
    }
  }
};

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