在前端项目中，我们通常会使用 Webpack 来进行代码的打包。然而，在使用 Webpack 的过程中，有时会遇到一些琐碎的问题。本篇文章将讨论一种常见的问题：Webpack 导致无法引入依赖包。
问题描述
使用 Webpack 打包后，我们发现无法引入依赖包，控制台出现以下错误：
Uncaught ReferenceError: require is not defined
问题分析
这个错误通常是由于 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）：
module.exports = {
// ...
target: 'webworker',
// ...
};方法二：配置 externals 属性
另一种方法是通过配置 externals 属性，告诉 Webpack 某些模块不需要打包。
示例代码如下（Webpack 配置文件 webpack.config.js）：
module.exports = {
// ...
externals: {
'some-dependency': 'someDependency',
// ...
},
// ...
};这样，Webpack 在打包时就会自动跳过 some-dependency 模块的打包，而直接在全局环境中注册 someDependency 对象。
结论
通过修改 Webpack 的配置，我们可以解决上述错误。不过，在使用任何工具时，我们都应该仔细阅读其文档和配置文件。只有深入学习和理解一个工具，才能更好地使用它。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671394c0ad1e889fe20e5766