在前端项目中，我们通常会使用 Webpack 来进行代码的打包。然而，在使用 Webpack 的过程中，有时会遇到一些琐碎的问题。本篇文章将讨论一种常见的问题：Webpack 导致无法引入依赖包。
问题描述
使用 Webpack 打包后，我们发现无法引入依赖包，控制台出现以下错误：
-------- --------------- ------- -- --- -------
问题分析
这个错误通常是由于 Webpack 的配置问题导致的。在 Webpack 中，如果我们设置了 target 属性为 web（即默认设置），那么 Webpack 会按照 Web 应用程序的规范进行打包。这意味着 Webpack 会把所有的模块都打包成一个单独的文件，包括 Node.js 模块。
Node.js 运行环境中有一个全局对象 require，它可以用来引入 Node.js 模块。然而，在浏览器中，这个对象是不存在的，因此会出现上述错误。
解决方法
要解决这个问题，我们需要对 Webpack 的配置进行修改。有两种解决方法：
方法一：将 target 属性改为 webworker
将 target 属性设置为 webworker，可以告诉 Webpack 在打包时不要包含 Node.js 模块的依赖。
示例代码如下（Webpack 配置文件 webpack.config.js）：
-------------- - - -- --- ------- ------------ -- --- --
方法二：配置 externals 属性
另一种方法是通过配置 externals 属性，告诉 Webpack 某些模块不需要打包。
示例代码如下（Webpack 配置文件 webpack.config.js）：
-------------- - -
-- ---
---------- -
------------------ -----------------
-- ---
--
-- ---
--这样，Webpack 在打包时就会自动跳过 some-dependency 模块的打包，而直接在全局环境中注册 someDependency 对象。
结论
通过修改 Webpack 的配置，我们可以解决上述错误。不过，在使用任何工具时，我们都应该仔细阅读其文档和配置文件。只有深入学习和理解一个工具，才能更好地使用它。
参考资料：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671394c0ad1e889fe20e5766