本文探討了Webpack——一個(gè)強(qiáng)大的靜態(tài)模塊打包器，它如何簡(jiǎn)化和優(yōu)化Web開發(fā)工作流程。儘管Webpack文檔詳盡，但初學(xué)者仍可能面臨學(xué)習(xí)曲線陡峭的問(wèn)題。本教程旨在幫助您掌握Webpack的核心概念，並逐步引導(dǎo)您進(jìn)行實(shí)踐操作。

核心要點(diǎn)：

• Webpack基礎(chǔ)： Webpack將所有文件和資源視為模塊，構(gòu)建依賴關(guān)係圖，生成一個(gè)或多個(gè)用於Web部署的bundle。
• 核心概念概述： 理解入口（entry）、輸出（output）、加載器（loaders）、插件（plugins）和模式（mode）設(shè)置，以便在不同環(huán)境（開發(fā)、生產(chǎn)）中有效使用Webpack。
• Webpack 5增強(qiáng)功能： 第5版引入了持久緩存、改進(jìn)的Tree Shaking以及刪除自動(dòng)Node.js polyfills等功能，從而提高性能並減小bundle大小。
• Webpack入門： 通過(guò)設(shè)置基本配置文件、理解默認(rèn)設(shè)置以及使用html-webpack-plugin等插件進(jìn)行動(dòng)態(tài)HTML生成來(lái)啟動(dòng)Webpack項(xiàng)目。
• 高級(jí)用法： 學(xué)習(xí)使用style-loader和css-loader處理CSS，使用內(nèi)置模塊替換舊的加載器來(lái)管理資源，並使用Webpack的開發(fā)服務(wù)器進(jìn)行實(shí)時(shí)重載來(lái)優(yōu)化開發(fā)流程。
• 生產(chǎn)環(huán)境最佳實(shí)踐： 利用Webpack的功能來(lái)轉(zhuǎn)換現(xiàn)代JavaScript，管理樣式和資源，並使用webpack-dev-server等工具以及針對(duì)生產(chǎn)版本構(gòu)建的優(yōu)化來(lái)加快開發(fā)速度。

什麼是Webpack？

Webpack的核心是一個(gè)靜態(tài)模塊打包器。在特定項(xiàng)目中，Webpack將所有文件和資源視為模塊，並依賴於一個(gè)依賴關(guān)係圖。該依賴關(guān)係圖描述了模塊之間如何通過(guò)文件之間的引用（require和import語(yǔ)句）相互關(guān)聯(lián)。 Webpack靜態(tài)地遍歷所有模塊以構(gòu)建該圖，並使用它來(lái)生成單個(gè)bundle（或多個(gè)bundle）——一個(gè)JavaScript文件，其中包含來(lái)自所有模塊的代碼，並按正確的順序組合。 “靜態(tài)地”意味著當(dāng)Webpack構(gòu)建其依賴關(guān)係圖時(shí)，它不會(huì)執(zhí)行源代碼，而是將模塊及其依賴項(xiàng)組合到一個(gè)bundle中。然後，可以將其包含在您的HTML文件中。

Webpack主要概念：

在深入實(shí)踐之前，我們需要清楚地理解Webpack的一些主要概念：

• 入口（Entry）： 入口點(diǎn)是Webpack用於開始構(gòu)建其內(nèi)部依賴關(guān)係圖的模塊。從那裡，它確定入口點(diǎn)依賴的其它模塊和庫(kù)（直接和間接），並將它們包含在圖中，直到?jīng)]有剩餘依賴項(xiàng)。默認(rèn)情況下，entry屬性設(shè)置為./src/index.js，但我們可以在Webpack配置文件中指定不同的模塊（甚至多個(gè)模塊）。
• 輸出（Output）： output屬性指示W(wǎng)ebpack在哪裡發(fā)出bundle以及要為文件使用的名稱。此屬性的默認(rèn)值為主要bundle的./dist/main.js和其它生成文件的./dist（例如圖像）。當(dāng)然，我們可以根據(jù)需要在配置中指定不同的值。
• 加載器（Loaders）： 默認(rèn)情況下，Webpack只理解JavaScript和JSON文件。為了處理其它類型的文件並將它們轉(zhuǎn)換為有效的模塊，Webpack使用加載器。加載器轉(zhuǎn)換非JavaScript模塊的源代碼，允許我們?cè)趯⑦@些文件添加到依賴關(guān)係圖之前對(duì)其進(jìn)行預(yù)處理。例如，加載器可以將文件從CoffeeScript語(yǔ)言轉(zhuǎn)換為JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為數(shù)據(jù)URL。使用加載器，我們甚至可以從JavaScript模塊直接導(dǎo)入CSS文件。
• 插件（Plugins）： 插件用於加載器無(wú)法執(zhí)行的任何其它任務(wù)。它們?yōu)槲覀兲峁┝岁P(guān)於資源管理、bundle最小化和優(yōu)化等的廣泛解決方案。
• 模式（Mode）： 通常，當(dāng)我們開發(fā)應(yīng)用程序時(shí)，我們使用兩種類型的源代碼——一種用於開發(fā)版本構(gòu)建，一種用於生產(chǎn)版本構(gòu)建。 Webpack允許我們通過(guò)將mode參數(shù)更改為development、production或none來(lái)設(shè)置要生成的版本。這允許Webpack使用與每個(gè)環(huán)境相對(duì)應(yīng)的內(nèi)置優(yōu)化。默認(rèn)值為production。 none模式意味著不會(huì)使用任何默認(rèn)優(yōu)化選項(xiàng)。

Webpack的工作原理：

即使是一個(gè)簡(jiǎn)單的項(xiàng)目也包含HTML、CSS和JavaScript文件。此外，它還可以包含諸如字體、圖像等的資源。因此，典型的Webpack工作流程將包括設(shè)置具有適當(dāng)CSS和JS鏈接以及必要資源的index.html文件。此外，如果您有很多相互依賴的CSS和JS模塊，則需要將它們優(yōu)化並正確組合到一個(gè)準(zhǔn)備用於生產(chǎn)的單元中。

為了完成所有這些工作，Webpack依賴於配置。從4版及更高版本開始，Webpack開箱即用地提供了合理的默認(rèn)值，因此不需要?jiǎng)?chuàng)建配置文件。但是，對(duì)於任何非簡(jiǎn)單的項(xiàng)目，您都需要提供一個(gè)特殊的webpack.config.js文件，該文件描述瞭如何轉(zhuǎn)換文件和資源以及應(yīng)該生成哪種類型的輸出。此文件可能會(huì)很快變得龐大，這使得很難理解Webpack的工作方式，除非您了解其工作原理背後的主要概念。

基於提供的配置，Webpack從入口點(diǎn)開始，在構(gòu)建依賴關(guān)係圖時(shí)解析它遇到的每個(gè)模塊。如果模塊包含依賴項(xiàng)，則會(huì)針對(duì)每個(gè)依賴項(xiàng)遞歸地執(zhí)行此過(guò)程，直到遍歷完成。然後，Webpack將所有項(xiàng)目的模塊捆綁到少量bundle中（通常只有一個(gè)），以便瀏覽器加載。

Webpack 5的新增功能：

Webpack 5於2020年10月發(fā)布。該公告很長(zhǎng)，探討了對(duì)Webpack所做的所有更改。不可能提及所有更改，對(duì)於像這樣的初學(xué)者指南來(lái)說(shuō)也是不必要的。相反，我將嘗試列出一些一般要點(diǎn)：

• 使用持久緩存改進(jìn)了構(gòu)建性能。開發(fā)人員現(xiàn)在可以啟用基於文件系統(tǒng)的緩存，這將加快開發(fā)構(gòu)建速度。
• 長(zhǎng)期緩存也得到了改進(jìn)。在Webpack 5中，對(duì)不影響最小化bundle版本的代碼（註釋、變量名）所做的更改不會(huì)導(dǎo)致緩存失效。此外，還添加了新的算法，這些算法以確定性方式為模塊和塊分配短數(shù)字ID，為導(dǎo)出分配短名稱。在Webpack 5中，它們?cè)谏a(chǎn)模式下默認(rèn)啟用。
• 由於更好的Tree Shaking和代碼生成，bundle大小得到了改進(jìn)。由於新的嵌套Tree Shaking功能，Webpack現(xiàn)在能夠跟蹤對(duì)導(dǎo)出嵌套屬性的訪問(wèn)。 CommonJs Tree Shaking允許我們消除未使用的CommonJs導(dǎo)出。
• 最低支持的Node.js版本已從6增加到10.13.0（LTS）。
• 代碼庫(kù)已清理。刪除了Webpack 4中標(biāo)記為已棄用的所有項(xiàng)目。
• 刪除了自動(dòng)Node.js polyfills。 Webpack的先前版本包含對(duì)crypto等原生Node.js庫(kù)的polyfills。在許多情況下，它們是不必要的，並且會(huì)大大增加bundle大小。這就是為什麼Webpack 5停止自動(dòng)填充這些核心模塊並專注於前端兼容模塊的原因。
• 作為開發(fā)的改進(jìn)，Webpack 5允許我們傳遞目標(biāo)列表並支持目標(biāo)版本。它提供目標(biāo)路徑的自動(dòng)確定。此外，它還提供自動(dòng)、唯一的命名，這可以防止使用相同全局變量進(jìn)行塊加載的多個(gè)Webpack運(yùn)行時(shí)之間發(fā)生衝突。
• webpack-dev-server命令現(xiàn)在是webpack serve。
• 引入了資源模塊，它替換了file-loader、raw-loader和url-loader的使用。

入門：

現(xiàn)在我們有了堅(jiān)實(shí)的理論基礎(chǔ)，讓我們?cè)趯?shí)踐中實(shí)現(xiàn)它。

首先，我們將創(chuàng)建一個(gè)新目錄並切換到它。然後，我們將初始化一個(gè)新項(xiàng)目：

mkdir learn-webpack
cd learn-webpack
npm init -y

接下來(lái)，我們需要在本地安裝Webpack和Webpack CLI（命令行界面）：

npm install webpack webpack-cli --save-dev

然後，我們將創(chuàng)建一個(gè)src目錄並在其中放入一個(gè)index.js文件，使其包含console.log("Hello, Webpack!");?，F(xiàn)在我們已經(jīng)可以運(yùn)行dev任務(wù)以在開發(fā)模式下啟動(dòng)Webpack了：

npm run dev

如前所述，Webpack將默認(rèn)入口點(diǎn)設(shè)置為./src/index.js，並將默認(rèn)輸出設(shè)置為./dist/main.js。因此，當(dāng)我們運(yùn)行dev任務(wù)時(shí)，Webpack所做的是獲取index.js文件的源代碼並將最終代碼捆綁到main.js文件中。