Javascript 是否添加。是否默认？：在react router 3中动态导入用于网页包代码拆分

最近我正在将我的项目从Webpack3（V3.3.0）升级到Webpack4（V4.44.2）。编译和构建工作非常完美，但最终却无法在屏幕上呈现任何内容

在比较了webpack 3和webpack 4的两个项目之间传递给

RouterContext

的参数后，我将根本原因缩小到动态导入组件

下面的脚本是我如何使用react router 3（3.0.5版）

getComponent

导入组件的，这在升级到webpack 4之前是可行的：

const loadRoute=callback=>module=>callback（空，模块）；
常量强制加载=（错误）=>{
记录器错误（err）；
window.location.reload（）；
};
导出默认值（加载路径、强制加载）=>(
导入（'./index.jsx'）。然后（加载路径（回调））.catch（forceToReload）}/>
);

幸运的是，经过几天的尝试和错误，我终于使我的项目呈现正确。 在webpack 4版本中，我必须将

.default

附加到

加载路径中的模块，如下所示：

const loadRoute=callback=>module=>callback（null，module.default）；

问题是
即使问题解决了，我仍然想知道是否有人能解释一下何时添加
.default

webpack 4在动态导入时编译是否不同？有什么想法吗？
经过几天的研究，我终于找到了问题的答案，希望我能在将来帮助那些有同样问题的人

Webpack官方网站（）的描述如下：

我们需要默认设置的原因是，由于webpack 4，在导入CommonJS模块时，导入将不再解析为module.exports的值，而是为CommonJS模块创建一个人工名称空间对象

出于好奇，我做了一些实验，将动态导入的内容注销：

//exportObject.js
导出默认值{a:1，b:2}；
出口常数c=3；
//exportString.js
导出默认的“测试字符串”；
//exportComponent.js
从“React”导入React，{Component}；
导出默认类exportComponent扩展组件{
建造师（道具）{
超级（道具）；
这是a=1；
这是b=2；
}
}
//exportFunction.js
导出默认值（）=>（{a:1，b:2}）；

//index.js
componentDidMount（）{
导入（'./exportObject'）。然后（模块=>{
console.group（'Object'）；
控制台。警告（'模块'，模块）；
console.warn（'module.a:'，module.a'）；
console.warn（'module.b:'，module.b.）；
console.warn（'module.default'，module.default'）；
控制台警告（'module.c'，module.c'）；
console.groupEnd（）；
});
导入（'./exportString'）。然后（模块=>{
console.group（'String'）；
控制台。警告（'模块'，模块）；
console.warn（'module.default'，module.default'）；
console.groupEnd（）；
});
导入（'./exportComponent'）。然后（模块=>{
控制台组（“组件”）；
控制台。警告（'模块'，模块）；
console.warn（'module.default'，module.default'）；
console.groupEnd（）；
});
导入（'./exportFunction'）。然后（模块=>{
console.group（'Function'）；
试一试{
console.warn（'module（）'，module（））；
}捕获（e）{
console.warn（'module（）'，e）；
}
试一试{
console.warn（'module.default（）'，module.default（））；
}捕获（e）{
console.warn（'module.default（）'，e）；
}
console.groupEnd（）；
});
}

这是Webpack 3项目的结果：


在Webpack 4项目中：


如您所见，非对象具有不同的结果。此发现与此描述相符（由webpack官方提供）

导出对象时没有那么大问题。但是，在对非对象使用module.exports时，您会遇到麻烦

我在代码中使用了
导出默认值
，而不是
模块。导出
，那么为什么我仍然得到结果？
事实上Babel@6将按以下方式进行转换：（）

Babel@6转换以下文件

导出默认的“foo”

进入

“严格使用”；
Object.defineProperty（导出，“\uu esModule”{
值：true
});
exports.default='foo'；

现在，一切都清楚了

我使用的软件包是：

node: 11.15.0

babel-core: "^6.23.1",
babel-loader: "7.1.4",
webpack: "4.44.2",
webpack-cli: "^4.2.0",

谢谢你问这个问题。我需要从require.sure转换为import（），因为webpack 5将其踢出。至于默认情况，这可能是一个问题。在获取组件时，我总是将其添加到我的require.sure语句中。实际上，从webpack docu：我们需要默认值的原因是，由于webpack 4，在导入CommonJS模块时，导入将不再解析为module.exports的值，而是为CommonJS模块创建一个人工名称空间对象。参考这篇文章：我看到你发现了。