webpack如何运作？

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.config.js文件中创建我们的Webpack配置.Webpack配置只是Javascript,需要导出一个对象:

webpack.config.js

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

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

Answer 1

在这种情况下,它将像CommonJS一样工作require(例如,Node requires).(Webpack的require支持比传统require的更灵活,但默认行为是相同的.)

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

值得一读的是整篇文章; 例如,缓存部分很重要.