背景
Webpack 是前端开发中常用的打包工具，可以将多个模块打包成一个或多个 bundle，便于网页的加载和优化。Webpack4 是 Webpack 的一个版本，相比于之前的版本，它有更好的性能和更多的功能。
然而，在使用 Webpack4 进行开发时，有时会遇到 ModuleNotFoundError 的问题。这个错误提示表示 Webpack 找不到某个模块，导致无法打包。这篇文章将介绍 Webpack4 中出现 ModuleNotFoundError 的原因和解决方法。
原因
在 Webpack4 中，模块的查找顺序发生了变化。它首先会在当前目录下查找模块，然后再去 node_modules 目录下查找。如果还是找不到，就会报错。
这种变化是为了解决之前版本中的一些问题，但也可能导致一些模块无法被正确查找到。
解决方法
1. 指定模块路径
如果你的模块在其他目录中，你可以通过指定模块路径的方式来解决这个问题。在 webpack.config.js 文件中，你可以添加 resolve 属性来指定模块路径。例如：
module.exports = {
// ...
resolve: {
modules: ['node_modules', 'src'],
},
};上面的配置告诉 Webpack 在 node_modules 和 src 目录下查找模块。这样，即使模块不在当前目录下，也能被正确地查找到。
2. 指定模块别名
除了指定模块路径，你还可以通过指定模块别名的方式来解决这个问题。在 webpack.config.js 文件中，你可以添加 resolve.alias 属性来指定模块别名。例如：
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};上面的配置告诉 Webpack 将 @ 符号解析为 src 目录。这样，在你的代码中，你就可以使用 @ 来代替 src 目录了。
3. 安装缺少的模块
如果你的代码中确实缺少某个模块，你需要通过 npm 安装它。在命令行中运行：
npm install 模块名
这样，你就可以在代码中使用这个模块了。如果你在开发过程中使用了一些新的模块，不要忘记将它们添加到 package.json 文件中。
示例代码
以下是一个简单的示例代码，演示了如何使用 resolve 和 alias 属性来解决 ModuleNotFoundError 的问题：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
-------- ---------------- -------
------ -
---- ----------------------- -------
--
--
--结论
在 Webpack4 中，ModuleNotFoundError 可能会出现，但我们可以通过指定模块路径、指定模块别名和安装缺少的模块来解决它。这些方法都很简单，但能够帮助你更好地使用 Webpack4。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67629d6d856ee0c1d4076c69