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如何知道require('jquery')什么？ 我沒有看到任何與jquery相關的配置選項。

Answer 1

在這種情況下，它就像CommonJS require s（例如，Node require s）一樣工作。 （Webpack require支持比傳統require更多的靈活性，但默認行為是相同的。）

文檔中的這個模塊部分解釋了Node如何確定從調用require() 。 如果你需要'jquery'，它首先查找該名稱的本機模塊，找不到，然后在node_modules中node_modules （因為在路徑的開頭沒有/或./ ）。 由於'jquery'是一個文件夾，它會查看package.json文件以查看它聲明包的main文件是什么，這就是它執行的內容。

值得一讀的是整篇文章; 例如，緩存部分很重要。