在使用 Webpack 进行前端代码打包时，有时会遇到 "Failed to load external module" 错误，这通常是与 Webpack 配置有关的问题。本文将介绍如何解决这种错误，希望可以帮助读者更好地使用 Webpack 进行前端开发。
错误原因
在 Webpack 构建过程中，可能会使用到一些第三方模块或库，这些模块或库可能需要通过 CDN 或者 NPM 安装后使用。如果在使用过程中，由于网络问题或者其他原因，这些模块或库没有成功加载，就会导致 "Failed to load external module" 错误的出现。
具体来说，这种错误可能发生在以下两种情况下：
- 不正确的 Webpack 配置
如果 Webpack 配置文件没有正确地引用对应的模块或库，就可能导致构建过程中无法找到对应的模块或库，从而出现 "Failed to load external module" 错误。
例如：
-- -------------------- ---- -------
-------------- - -
------ ----------------
------- -
--------- -----------
--
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-
-在这个示例中，我们使用了 css-loader 和 style-loader 对 CSS 进行处理，但是如果没有在配置文件中正确安装这些模块，就会导致无法找到这些模块，从而出现 "Failed to load external module" 错误。
- 网络或安装问题
如果网络环境不稳定或者没有正确安装所需的模块或库，也有可能导致 "Failed to load external module" 错误的出现。在这种情况下，我们需要检查网络环境和模块的安装情况，以确保所需的模块或库可以正常加载。
解决方法
针对 "Failed to load external module" 错误，我们可以有以下几种解决方法：
方法一：检查 Webpack 配置文件
我们首先需要检查 Webpack 配置文件是否正确配置，确保引用的模块或库名称和路径都是正确的。可以通过打印相关路径和模块名称，确认配置是否正确。
例如：
-- -------------------- ---- -------
-------------- - -
------ ----------------
------- -
--------- -----------
--
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-
-
------------------------------------------
--------------------------------------------运行以上代码，如果输出正确的路径，就说明这个模块按照预期可以被引用。
方法二：检查网络环境
如果检查配置文件并没有发现问题，则需要进一步检查网络环境，确保所需的模块可以从远程服务器正确地下载到本地。
例如，我们可以通过 ping 命令检查网络是否正常：
ping www.npmjs.com
如果返回正常的结果，说明网络环境正常，如果出现问题，可能需要修复网络或者使用 VPN 进行连接。
方法三：重新安装所需模块或库
如果网络环境和配置文件都没有问题，那么最后的解决方法就是尝试重新安装所需的模块或库。
例如，针对以上配置文件示例，我们需要重新安装 style-loader 和 css-loader，可以通过以下命令来完成：
npm install style-loader css-loader --save-dev
安装完成后，重新运行 Webpack 构建命令，观察是否问题得到解决。
总结
针对 "Failed to load external module" 错误，我们可以通过检查配置文件、检查网络环境和重新安装所需模块或库等方法进行解决。对于前端开发人员来说，对这类错误的解决方法应该有所了解，能够更好地使用 Webpack 来实现前端代码打包和构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec312ff6b2d6eab3675846