如何让Webpack打包Node ESM项目时生成import而非require？

你遇到的问题核心是node-externals默认会将外部依赖转换为CommonJS风格的require语句，和你要生成的ESM模块不兼容。只需调整node-externals的配置，就能让Webpack输出ESM风格的import语句。

修改步骤： #

• 在调用nodeExternals()时添加importType: 'module'参数，强制它生成ESM的导入语法
• 修正配置里的笔误：target: 'es20201'改为target: 'es2020'（多输入了一个1）

修改后的完整配置： #

import path from 'path';
import { fileURLToPath } from "url";
import nodeExternals from 'webpack-node-externals';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
    entry: './build/graphql/server/web/WebServer.js',
    externalsPresets: { node: true },
    // 关键修改：添加importType配置
    externals: [nodeExternals({ importType: 'module' })],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'Server.js',
        library: {
            type: "module",
        }
    },
    experiments: {
        outputModule: true,
    },
    plugins: [],
    // 修正target的笔误
    target: 'es2020'
} 

原理说明： #

node-externals默认针对CommonJS环境生成require语句，开启importType: 'module'后，它会为外部依赖生成import xxx from 'xxx'的ESM语法，配合你已经设置的experiments.outputModule: true和package.json里的"type": "module"，打包后的bundle就能完全符合ESM规范，运行时不会再出现require is not defined的错误。

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