webpack的require是如何工作的？

Question

我不理解 webpack 的 require 函数是如何工作的。例如，我正在阅读有关 webpack 的此文章，其中有以下示例：

让我们先创建我们的项目并安装 Webpack，我们还将引入 jQuery 来演示稍后的一些东西。

$ npm init
$ npm install jquery --save
$ npm install webpack --save-dev

现在让我们创建应用程序的入口点，先使用纯 ES5 代码：

src/index.js

var $ = require('jquery');

$('body').html('Hello');

让我们创建Webpack配置，保存在webpack.config.js文件中。 Webpack配置只是JavaScript，并且需要导出一个对象：

webpack.config.js

module.exports = {
    entry:  './src',
    output: {
        path:     'builds',
        filename: 'bundle.js',
    },
};

webpack如何知道require('jquery')中的jquery是什么？我没有看到任何与jquery相关的配置选项。

webpack如何知道require('jquery')中的jquery是什么？我没有看到任何与jquery相关的配置选项。

- courses.indepth.dev

---

好的，它只是下载jQuery并将其放入“node_modules”文件夹中，并将其添加为“package.json”的依赖项。这与webpack有什么关系？ - Max Koretskyi

Answer 1

在这种情况下，它的工作方式与CommonJS的require相同（例如，Node的requires）。 （Webpack的requires支持的灵活性比传统的requires更多，但默认行为相同。）

文档中的模块部分解释了Node如何确定从调用require()返回什么。如果你需要'jquery'，它首先查找该名称的本地模块，未找到，然后查找node_modules（因为您的路径开头没有/或./） 。由于'jquery'是一个文件夹，因此它查看package.json文件以查看它声明的包的main文件，然后执行它。

阅读整个内容是值得的；例如，缓存部分非常重要。

- Brendan Gannon

---

谢谢您的回答，那么您的意思是webpack只是将require调用委托给Node并使用它返回的内容？ - Max Koretskyi

@Maximus 它还执行其他操作以支持更灵活的require解析、插件等... 但是是的，如果您编写 node 风格的require, 它最终会委托给 Node。当然，这种行为是相同的。 - Brendan Gannon

Webpack不会委托给Node.js的require函数。它是完全独立实现了Node.js解析算法（加上更多的东西）。这是Webpack用于解析的库：https://github.com/webpack/enhanced-resolve - Tobias K.