Webpack 5如何将自定义Loader识别为ES模块而非CommonJS？

要让Webpack识别你的ES模块格式自定义Loader，解决require() of ES Module的报错，你可以通过以下几种方式实现：

方法1：在Loader的package.json中声明模块类型 #

如果你的Loader是独立的npm包，在Loader目录下的package.json中添加"type": "module"字段，Webpack会自动将其识别为ES模块：

{
  "name": "my-loader",
  "type": "module"
}

方法2：在Webpack配置中显式指定Loader类型 #

在webpack.config.js的rules配置里，将loader改为对象形式，显式设置type: "module"，告诉Webpack这是一个ES模块Loader：

// webpack.conf.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'my-loader',
            type: 'module' // 关键配置：指定Loader为ES模块
          }
        ],
      },
    ],
  },
  resolveLoader: {
    alias: {
      'my-loader': '/home/projects/webpack-webpack-js-org-7gmdc8/my-loader/main.mjs',
    },
  },
};

方法3：确保文件扩展名与模块类型匹配 #

使用.mjs扩展名的文件默认会被Node.js视为ES模块，但需要结合上面两种方法之一，让Webpack同步这个识别逻辑，确保正确加载.mjs格式的Loader。

问题根源 #

你遇到的报错是因为Webpack的loader-runner默认按CommonJS加载Loader，而你的Loader采用ES模块语法。由于你没有通过配置或package.json声明模块类型，loader.type为undefined，不满足loader.type === "module"的判断条件，导致require()尝试加载ES模块，触发ERR_REQUIRE_ESM错误。

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