为什么Webpack打包后模块内容为空？

令狐芹芹提问于 2026-02-14 07:57:30 阅读 74

工具

我在用Webpack打包项目时，发现某个自定义模块导出的内容在打包后变为空对象。比如这个模块：export const data = { name: 'test' }，在入口文件import { data } from './module'时控制台却显示data是空的。

已经检查过文件路径没问题，尝试在模块文件里加console.log(data)发现本地可以正常输出，但打包后的bundle.js里对应模块代码变成了module.exports = {}。排查了Webpack配置里的module.rules，所有js相关loader都正常，连注释都去掉了还是不行。

这是我的loader配置片段：


module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: { presets: ['@babel/preset-env'] }
      }
    }
  ]
}

我来解答赞 8 收藏

反馈

1 条解答

Prog.怡然 Lv1

这个问题我之前踩过坑，说起来都是泪。你遇到的情况大概率是 Babel 配置的问题，具体来说是 @babel/preset-env 默认会把 ES Module 转换成 CommonJS，而 Webpack 在处理模块时可能会被这种转换搞晕，导致最终打包出来的模块内容变为空对象。

解决办法其实很简单，你需要在 Babel 的配置里明确告诉它不要乱动你的 ES Module。修改你的 Babel 配置，加上一个选项 modules: false，像这样：

module: {

  rules: [

    {

      test: /.js$/,

      exclude: /node_modules/,

      use: {

        loader: 'babel-loader',

        options: { 

          presets: [['@babel/preset-env', { modules: false }]] 

        }

      }

    }

  ]

}

这个配置的意思是让 Babel 不要碰你的模块系统，保持 ES Module 的原样，Webpack 自己会处理好这些模块。加了这个配置后重新打包，应该就能正常导出你的 data 对象了。

顺便吐槽一下，Babel 和 Webpack 的这种配合问题真的是老生常谈了，但每次遇到还是会让人抓狂。尤其是当你排查了半天发现是某个默认行为在作怪的时候，真的想砸键盘。不过还好，踩过一次坑之后就长记性了。希望你能少走点弯路。

2026-02-14 14:03