最近在使用 webpack@4.x 做前端项目开发时，遇到了一个极为棘手的问题：动态导入模块时出现了错误，导致项目无法正常运行。经过反复试验和探究，终于找到了问题的根源，并想与大家分享一下解决方案。
问题描述
在项目中使用了动态导入语法，例如：
import('./module')
.then(module => {
// do something
})
.catch(error => {
// handle error
})这段代码看起来非常简单，它的作用是在运行时动态导入 module 模块，然后执行一些操作。但是，当我们把它放在实际项目中打包时，会遇到一个错误：
Uncaught (in promise) Error: Cannot find module './module'
这个错误并不是很常见，但一旦出现，它会严重影响到我们的项目开发和部署。
问题分析
我们首先要知道的是，webpack 4.x 默认启用了 optimization.splitChunks 特性，用来将一些公共模块打包到一个独立的 chunk，以此来减小打包后的文件体积。这个特性在大多数情况下都是非常有用的，但在动态导入模块时会出现问题。
原因是因为 webpack 4.x 在打包时，并不知道动态导入模块的确切路径，而是根据模块的上下文来解析路径。当一个模块被拆分到另一个 chunk 中时，它的上下文发生了改变，导致动态导入的路径不再正确。
例如，如果我们有如下代码：
-- -------------------- ---- -------
-- --------
------------------
------------ -- -
-- -- ---------
--
------------ -- -
-- ------ -----
--
-- ---------
----------------- -- ---------当我们执行 webpack 命令进行打包时，输出结果如下：
Hash: xxx
Version: webpack 4.46.0
Time: xxxms
Built at: xx/xx/xx xx:xx:xx
Asset Size Chunks Chunk Names
index.bundle.js 46 bytes 0 [emitted] index
module.bundle.js 413 bytes 1 [emitted] module
vendors~index~module.bundle.js 765 bytes 2 [emitted] vendors~index~module可以看到，index 和 module 两个模块都被拆分到不同的 chunk 中，导致动态导入的路径不再正确。在这种情况下，我们需要找到解决方案。
解决方案
解决这个问题，有多种方法可选，下面介绍一种较为简单有效的方案。
方案一：关闭 optimization.splitChunks
由于这个问题是由于 splitChunks 特性引起的，我们可以尝试关闭此特性来解决问题。修改 webpack.config.js 文件，添加如下配置：
module.exports = {
// ...
optimization: {
splitChunks: false
}
}这种方案的优点是比较简单，直接关闭掉 splitChunks 特性即可，无需做其他调整。但这样做的缺点是，无法体现 splitChunks 特性的优点，在一些大型项目中可能会导致打包后的文件非常庞大。
方案二：手动配置 splitChunks
另一种解决方案是手动配置 splitChunks，将动态导入的模块拆分出来单独打包。修改 webpack.config.js 文件，添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------------ -
------ -
------- --------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -------
-
-
-
-
-这个配置的意思是，将所有异步模块（即动态导入模块）打包到一个名为 async 的 chunk 中。这样做的好处是，我们可以在不关闭 splitChunks 特性的情况下，解决动态导入模块的问题，并保持打包后文件的体积较小。
在实际应用时，我们可以根据实际情况，调整该配置的参数，以达到更优的效果。
示例代码
为了方便大家理解和使用上述解决方案，这里提供一个标准的 webpack 配置文件示例。
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------------- -
------------ -
------------ -
------ -
------- --------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -------
-
-
-
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-总结
本文介绍了 webpack@4.x 动态导入的大坑及解决方案。当我们在使用动态导入模块时，应该注意到这个问题，并采取有效的方法来解决它。为了更好地开发前端项目，我们需要不断地学习和探究，发现更多的问题，并总结出更多的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f13e7af6b2d6eab3b13166