Webpack打包type:module类型Node.js应用时出现require语句冲突的解决方法咨询

我是Webpack的新手，对当前Webpack配置的运行逻辑不甚了解。我有一个type:module类型的Node.js应用，这意味着我无法使用require语句进行模块导入。我的源代码采用Typescript编写，使用tsc转译后一切运行正常；但使用Webpack打包应用后，产物中被添加了一些require语句用于导入模块，这与package.json中声明的module类型配置冲突，导致应用无法运行。

以下是我的配置文件：

webpack.config.js：

import { resolve } from 'path';
import * as webpack_node_externals from 'webpack-node-externals';
export default {
    mode: "production",
    target: 'node',
    externalsPresets: { node: true },
    externals: [webpack_node_externals.default()],
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    configFile: "./tsconfig.json"
                }
            },
        ],
    },
    entry: {
        "application": './src/infrastructure/application.ts',
    },
    output: {
        filename: '[name].js',
        path: resolve('dist'),
    },
};

tsconfig.json：

{
    "compilerOptions": {
        "outDir": "../../dist",
        "target": "ESNext",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noEmitOnError": false,
        "removeComments": false,
        "sourceMap": true,
        "module": "ESNext",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "baseUrl": "."
    },
    "include": ["**/*"]
}

这个问题的核心是Webpack默认针对Node.js目标时会生成CommonJS模块代码，而你的项目明确要求使用ESM，所以需要调整Webpack配置来强制生成ESM输出，同时确保TypeScript的转译和Webpack的处理对齐。

下面是具体的修改步骤：

1. 调整Webpack配置，强制输出ESM格式 #

首先在webpack.config.js中启用ESM输出的实验特性，并指定输出模块格式，同时修正外部模块的导入方式：

import { resolve } from 'path';
import * as webpack_node_externals from 'webpack-node-externals';
export default {
    mode: "production",
    target: 'node',
    externalsPresets: { node: true },
    // 修改外部模块处理逻辑，生成ESM的import语句
    externals: [webpack_node_externals.default({
        importType: 'module'
    })],
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    configFile: "./tsconfig.json"
                }
            },
        ],
    },
    // 启用ESM输出实验特性
    experiments: {
        outputModule: true
    },
    entry: {
        "application": './src/infrastructure/application.ts',
    },
    output: {
        filename: '[name].js',
        path: resolve('dist'),
        // 指定输出为ESM模块
        libraryTarget: 'module',
        // 确保代码块也使用ESM格式
        chunkFormat: 'module'
    },
};

2. 优化TypeScript配置对齐ESM解析 #

你的tsconfig.json已经设置了module: "ESNext"，可以把moduleResolution改为nodenext（或bundler，适配Webpack 5+的打包逻辑），让TypeScript的模块解析更贴合ESM规范：

{
    "compilerOptions": {
        "outDir": "../../dist",
        "target": "ESNext",
        "moduleResolution": "nodenext", // 或 "bundler"
        "noImplicitAny": true,
        "noEmitOnError": false,
        "removeComments": false,
        "sourceMap": true,
        "module": "ESNext",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "baseUrl": "."
    },
    "include": ["**/*"]
}

3. 确认package.json的ESM配置 #

确保你的package.json中已经正确声明ESM类型，并明确入口文件：

{
    "type": "module",
    "main": "./dist/application.js",
    "exports": "./dist/application.js" // 推荐用exports字段明确入口
}

4. 验证打包结果 #

修改完成后重新运行Webpack打包，检查dist/application.js中的代码，应该不再出现require语句，全部替换为ESM的import和export语法。

这样调整后，Webpack生成的产物就会完全符合ESM规范，和你项目的type:module配置兼容，应用就能正常运行了。

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