webpack 的 require 是如何工作的？答案

【问题标题】：How does webpack's require work?webpack 的 require 是如何工作的？
【发布时间】：2016-02-25 11:10:29
【问题描述】：

我不明白 webpack 的 require 函数是如何工作的。例如，我正在阅读 this article 关于 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.config.js 文件中创建我们的 Webpack 配置。 Webpack 配置只是 Javascript，需要导出一个对象：

webpack.config.js

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

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

【问题讨论】：

好吧，它只是下载 jquery 并将其放入 node_modules 文件夹并将其作为依赖项添加到 package.json。这和 webpack 有什么关系？

标签： javascript webpack

【解决方案1】：

在这种情况下，它将像 CommonJS requires 一样工作（例如，Node requires）。（Webpack 的requires 比传统的requires 支持更大的灵活性，但默认行为是相同的。）

This Modules section in the docs 解释了 Node 如何计算出调用 require() 时要返回的内容。如果您需要“jquery”，它首先会查找该名称的本机模块，但没有找到，然后查找node_modules（因为路径开头没有/ 或./）。由于 'jquery' 是一个文件夹，它会查看 package.json 文件以查看它声明包的 main 文件是什么，这就是它执行的内容。

整本书值得一读；例如，缓存部分很重要。

【讨论】：

感谢您的回答，所以您的意思是 webpack 只是将 require 调用委托给 Node 并使用它返回的任何内容？
@Maximus 它还做了其他事情来支持更灵活的需求解析、插件等......但是是的，我认为如果你编写节点样式的requires，它最终会委托给 Node.js。当然行为是一样的。
webpack 不委托给 node.js 要求。它是 node.js 解析算法的完全独立实现（还有更多内容）。这是 webpack 用于解析的库：github.com/webpack/enhanced-resolve