webpack是一款基于JS（JavaScript）的靜態(tài)模塊打包器，它可以將應(yīng)用程序每個模塊打包成一個或多個bundle，不懂webpack的網(wǎng)友需要先了解webpack的四個核心概念：入口、輸出、loader、插件，往下可以閱讀其詳細(xì)介紹。

webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)

入口(entry)

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack 會找出有哪些模塊和庫是入口起點(diǎn)（直接和間接）依賴的。

每個依賴項(xiàng)隨即被處理，比較后輸出到稱之為 bundles 的文件中，我們將在下一章節(jié)詳細(xì)討論這個過程。

可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點(diǎn)（或多個入口起點(diǎn)）。默認(rèn)值為 ./src。

接下來我們看一個 entry 配置的比較簡單例子：

出口(output)

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認(rèn)值為 ./dist。基本上，整個應(yīng)用程序結(jié)構(gòu)，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程：

在上面的示例中，我們通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪里。可能你想要了解在代碼比較上面導(dǎo)入的 path 模塊是什么，它是一個 Node.js 核心模塊，用于操作文件路徑。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進(jìn)行處理。

本質(zhì)上，webpack loader 將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴圖（和比較終的 bundle）可以直接引用的模塊。

在更高層面，在 webpack 的配置中 loader 有兩個目標(biāo)：

test 屬性，用于標(biāo)識出應(yīng)該被對應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個或某些文件。

use 屬性，表示進(jìn)行轉(zhuǎn)換時，應(yīng)該使用哪個 loader。

以上配置中，對一個單獨(dú)的 module 對象定義了 rules 屬性，里面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：

插件(plugins)

loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。

想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過選項(xiàng)(option)自定義。你也可以在一個配置文件中因?yàn)椴煌�目的而多次使用同一個插件，這時需要通過使用 new 操作符來創(chuàng)建它的一個實(shí)例。

webpack 提供許多開箱可用的插件！查閱我們的插件列表獲取更多信息。

在 webpack 配置中使用插件是簡單直接的，然而也有很多值得我們進(jìn)一步探討的用例。

官方網(wǎng)站：https://webpack.docschina.org/

相關(guān)搜索：模塊