如何用Webpack 5构建ES模块包并在Node.js ES模块中正常引入使用？

开发者阿泽

2026-10-7

解决方案

总共需要修改3处配置即可解决所有报错：

1. 修复`npm run build`的`require is not defined`报错

你在package.json添加"type": "module"后，项目下所有.js后缀文件会被Node默认识别为ES模块，不再支持CommonJS的require语法。
两种方案二选一即可：

最简单的方案：直接把webpack.config.js重命名为webpack.config.cjs，.cjs后缀会强制Node用CommonJS规范解析该文件，不需要修改文件内原有代码
不想修改后缀的话：把原webpack.config.js改写为ES模块规范：用import path from 'path'导入依赖，用export default {}导出配置

2. 修复打包产物无default导出的问题

你已经开启了outputModule实验特性，但还需要配置output.library指定导出规则，修改webpack配置的output字段如下：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 新增以下配置
        library: {
            type: 'module',
            export: 'default'
        }
    },
    experiments: {
        outputModule: true,
    },
};

该配置会让webpack把你源码中的default导出，作为整个构建包的default导出暴露。

3. 修正`package.json`的配置

把module字段的路径修改为和打包输出文件名一致：

{
  "name": "exporter",
  "version": "1.0.0",
  "module": "dist/bundle.js", // 此处修改为实际输出路径
  "scripts": {
    "build": "webpack"
  },
  "type": "module"
}