Webpack 4动态导入问题：编译正常但index.js为空

我帮你排查下当前代码和配置里的几个核心问题，这些都可能导致编译后index.js为空，或者动态导入无法正常工作：

1. 模块解构与导出不匹配 #

你的bar.js用的是默认导出（export default），但在index.js的then回调里，你尝试解构出bar这个命名导出——这完全不匹配，会导致后续代码无法正确执行，甚至可能让Webpack的优化逻辑误删无效代码。

你可以改成直接获取模块的default属性：

$('#test').on('click',(e)=>{
  import(/* webpackChunkName: "lazy-vendors/bar" */ './partials/bar')
    .then(module => {
      module.default.sayBar();
    });
});

或者用解构语法明确指定默认导出：

$('#test').on('click',(e)=>{
  import(/* webpackChunkName: "lazy-vendors/bar" */ './partials/bar')
    .then(({ default: bar }) => {
      bar.sayBar();
    });
});

2. Babel缺少动态导入语法支持 #

你的Babel配置里plugins部分显示截断了（['@bab...']），而Webpack 4虽然原生支持动态导入，但Babel默认无法识别import()语法，必须添加专门的插件让Babel正确处理这个语法，否则转译过程中可能破坏代码结构，最终生成空的bundle文件。

更新你的Babel配置：

{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-syntax-dynamic-import']
    }
  }
}

3. 确认Webpack入口配置正确 #

检查你的Webpack主配置里的entry字段，确保它正确指向了你的index.js文件，比如：

module.exports = {
  entry: './src/index.js', // 这里要和你的文件路径一致
  // 其他配置项...
};

如果入口路径错误，Webpack会生成一个没有实际代码的空bundle。

4. 临时切换到development模式排查 #

Webpack 4的production模式会开启大量优化，有时候如果你的代码全在事件回调里（没有顶层可执行代码），可能会被误判为无效代码而剔除。你可以暂时把mode设为development试试：

module.exports = {
  mode: 'development',
  // 其他配置项...
};

按上面的步骤调整后，重新运行Webpack编译，应该就能解决index.js为空的问题，点击按钮也能正常弹出bar提示了。

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