Webpack处理.mjs模块时默认导出的特殊注意事项

问题背景

在使用Webpack构建项目时，开发者经常会遇到模块导入导出的问题。特别是当项目同时涉及以下两种情况时，可能会出现默认导出处理异常：

1. 使用了.mjs扩展名的ES模块
2. 配置了某些依赖为外部依赖(externals)

问题现象

当项目中的某个依赖通过package.json的exports字段指定了.mjs文件作为模块入口，同时另一个依赖被配置为外部依赖时，Webpack生成的代码会丢失对默认导出的正确处理。

具体表现为：

• 正常情况下，Webpack会生成包含__webpack_require__.n()调用的代码，正确处理默认导出
• 但在上述特殊情况下，生成的代码会直接调用模块本身，而忽略默认导出

技术原理分析

这个问题源于Webpack处理外部依赖和ES模块的交互方式：

1. 外部依赖处理：当使用externals配置时，Webpack不会将指定模块打包进bundle，而是保留为外部引用
2. ES模块特性：.mjs文件明确表示使用ES模块语法，具有严格的模块边界
3. 默认导出机制：Webpack通常使用__webpack_require__.n()辅助函数来处理默认导出

解决方案

针对这个问题，正确的处理方式是在配置外部依赖时，显式指定需要引用的默认导出。具体修改如下：

externals: (ctx, callback) => {
    if(["external_dep"].indexOf(ctx.request) !== -1){
        // 注意这里添加了.default后缀
        callback(null, `assign-properties ${ctx.request}.default`);
        return;
    }
    callback();
}

深入理解

1. assign-properties的作用：这是一个简单的属性赋值工具，本身不了解ES模块的特性
2. .default后缀的意义：明确告诉Webpack我们需要引用模块的默认导出
3. 模块系统差异：CommonJS和ES模块对默认导出的处理方式不同，需要特别注意

最佳实践建议

1. 当配置外部依赖时，始终考虑模块的导出方式
2. 对于明确使用ES模块的项目，建议在外部依赖配置中显式指定.default
3. 在混合使用CommonJS和ES模块的项目中，要特别注意模块间的互操作性

总结

Webpack作为强大的模块打包工具，能够处理各种复杂的模块场景。但在处理ES模块和外部依赖的组合时，开发者需要特别注意默认导出的处理方式。通过显式指定.default后缀，可以确保模块系统间的正确交互，避免潜在的运行时错误。