摘要：資源哈希編碼使用可以為每個(gè)包的名稱(chēng)注入一個(gè)哈希值例如，，以便在版本更新后使客戶(hù)端上舊版本的包無(wú)效重新下載。如此受人喜愛(ài)的原因之一是熱模塊更換?？梢詾槲募晒Ｖ?，在內(nèi)容更改時(shí)，可以作廢瀏覽器緩存中上個(gè)版本的包。

原文鏈接：https://survivejs.com/webpack...
翻譯計(jì)劃：https://segmentfault.com/a/11...

涉及到的未翻譯單詞

input 輸入

output 輸出

entry 入口文件

bundle 包（打包結(jié)果）

Webpack 是模塊打包器。它可以在打包的同時(shí)使用任務(wù)運(yùn)行器。然而，由于社區(qū)開(kāi)發(fā)的 webpack 插件，打包器和任務(wù)運(yùn)行器之間的界限變得模糊。有時(shí)，這些插件甚至獨(dú)立于 webpack 使用，例如清理構(gòu)建目錄或部署構(gòu)建使用的插件。
（譯者注：grunt 之類(lèi)的任務(wù)運(yùn)行器，就是自動(dòng)幫你走一次如“組合兩個(gè) js 文件--壓縮 js--壓縮 css”這樣流程的工具）

Webpack 也可以在其他環(huán)境中的使用，例如 Ruby on Rails。盡管它的名字帶有 web，但 webpack 并不僅限于 web。它也可以打包其他東西，這點(diǎn)在 Build Targets 章節(jié)中會(huì)提到。

T> 如果你想更詳細(xì)地了解構(gòu)建工具及其歷史，請(qǐng)查看附錄 Comparison of Build Tools。

使用 webpack 構(gòu)建工程，至少包括 input 和 output。打包處理從用戶(hù)定義的 entry 開(kāi)始。entry 本身就是模塊，它可以通過(guò) import 指向其他模塊。

當(dāng)你使用 webpack 打包項(xiàng)目時(shí)，它會(huì)遍歷 import，構(gòu)建項(xiàng)目的依賴(lài)關(guān)系圖，然后根據(jù)配置文件中的設(shè)定生成 output。你還可以定義分割點(diǎn)，以在項(xiàng)目代碼內(nèi)拆分出多帶帶的 bundle（包）。

Webpack 支持開(kāi)箱即用的 ES2015，CommonJS 和 AMD 模塊標(biāo)準(zhǔn)。loader 機(jī)制也適用于 CSS，通過(guò) css-loader 在 css 文件中使用 @import 和 url()。你還可以找到某些實(shí)現(xiàn)特定功能的插件，例如壓縮，國(guó)際化，HMR等。

T> 依賴(lài)圖是描述節(jié)點(diǎn)如何相互關(guān)聯(lián)的有向圖。這個(gè)圖是通過(guò)文件之間的引用（require，import）構(gòu)建的。Webpack 會(huì)在不執(zhí)行資源的情況下靜態(tài)遍歷這些資源，并生成創(chuàng)建 bundle 所需的依賴(lài)圖。

Webpack 從 entry 開(kāi)始運(yùn)行。entry 通常是 JavaScript 模塊，webpack 從這里開(kāi)始遍歷處理。在此過(guò)程中，webpack 根據(jù) loader 配置轉(zhuǎn)換每個(gè)匹配到的模塊。

Entry 本身就是一個(gè)模塊。當(dāng) webpack 遇到 entry，webpack 會(huì)在文件系統(tǒng)匹配相關(guān)文件。除了 node_modules 之外，webpack 還可以對(duì)特定目錄執(zhí)行查找。也可以調(diào)整 webpack 匹配文件擴(kuò)展名的方式，也可以為目錄定義 aliases（別名）。這方面在 Consuming Packages 章節(jié)有更詳細(xì)的介紹。

如果 webpack 正確解析文件，對(duì)應(yīng) loader 會(huì)處理匹配的文件，不同的 loader 對(duì)模塊內(nèi)容應(yīng)用的轉(zhuǎn)換各不相同。如果解析失敗，webpack 會(huì)報(bào)運(yùn)行時(shí)錯(cuò)誤。

loader 可以通過(guò)多種方式匹配待處理文件，如文件類(lèi)型和文件的位置。 Webpack 甚至可以讓你按 import 位置分類(lèi)，不同位置 import 的文件采用不同的轉(zhuǎn)換方法。

對(duì) webpack loader 執(zhí)行相同的解析過(guò)程。 你可以在選擇 loader 時(shí)使用相同的邏輯。由于這個(gè)原因，Loader 已經(jīng)解析了自己的配置。如果 webpack 查找 loader 失敗，則會(huì)引發(fā)運(yùn)行時(shí)錯(cuò)誤。

T> Webpack 的解釋底層依賴(lài)于 enhanced-resolve 包。

Webpack 將在構(gòu)造依賴(lài)圖時(shí)解析它遇到的每個(gè)模塊。如果 entry 包含依賴(lài)項(xiàng)，則將針對(duì)每個(gè)依賴(lài)項(xiàng)遞歸執(zhí)行該過(guò)程，直到遍歷完成為止。 Webpack 可以針對(duì)任何文件類(lèi)型執(zhí)行此過(guò)程，這與 Babel 或 Sass 編譯器等專(zhuān)用工具不同。

Webpack 可以控制對(duì)不同資源的處理方式。例如，可以把資源內(nèi)聯(lián)到 JavaScript 包以避免過(guò)多的網(wǎng)絡(luò)請(qǐng)求（譯者注：例如圖片轉(zhuǎn) base64）。Webpack 還允許你使用 CSS 模塊等技術(shù)將樣式與組件結(jié)合，并避免標(biāo)準(zhǔn) CSS 樣式問(wèn)題。這種靈活性是 webpack 價(jià)值的體現(xiàn)。

盡管 webpack 主要用于打包 JavaScript，但它可以捕獲圖像或字體等資源，并為它們抽取為多帶帶的文件。Entry 只是打包處理的起點(diǎn)。 webpack 生成的內(nèi)容完全取決于你配置它的方式。

Webpack 會(huì)下到上、從右到左地（styleLoader(cssLoader("./main.css"))）處理匹配成功的加載器，模塊會(huì)依次通過(guò) loader 的處理。最后，你將獲得 webpack 輸出的包。Loader Definitions 章節(jié)詳細(xì)介紹了該主題。

如果所有 loader 都成功運(yùn)行，則 webpack 會(huì)在最后一個(gè)包中包含源。 Plugins 可以在打包過(guò)程的不同階段攔截運(yùn)行時(shí)事件。

雖然 loader 可以做很多事情，但它們不能為高級(jí)任務(wù)提供足夠的動(dòng)力。Plugins 可以攔截 webpack 提供的運(yùn)行時(shí)事件。一個(gè)很好的例子是由 MiniCssExtractPlugin 執(zhí)行的包提取，當(dāng)與 loader 一起使用時(shí)，從包中提取 CSS 文件并將其提取到多帶帶的文件中。如果沒(méi)有這一步，CSS 將在生成的 JavaScript 中內(nèi)聯(lián)，因?yàn)?webpack 默認(rèn)將所有代碼視為 JavaScript。CSS 提取將在 Separating CSS 一章中討論。

每個(gè)模塊都經(jīng)過(guò)處理之后，webpack 生成 output。output 包括一個(gè)引導(dǎo)腳本，其中包含一個(gè)指引瀏覽器執(zhí)行該項(xiàng)目的 manifest 文件?？梢詫?manifest 提取到多帶帶的文件中，本書(shū)后面會(huì)有相關(guān)介紹。output 會(huì)根據(jù)你使用的 build target 而有所不同（Web 不是唯一選擇）。

這并不是打包過(guò)程的全部?jī)?nèi)容。例如，你可以做代碼拆分，webpack 會(huì)在程序運(yùn)行到所需功能時(shí)才加載的多帶帶包。這個(gè)話(huà)題會(huì)在 Code Splitting 章節(jié)中討論。

webpack 的核心依賴(lài)于配置。以下是根據(jù)官方 webpack 教程改編的配置示例證明：

webpack.config.js

const webpack = require("webpack");

module.exports = {
  // Where to start bundling
  entry: {
    app: "./entry.js",
  },

  // Where to output
  output: {
    // Output to the same directory
    path: __dirname,

    // Capture name from the entry using a pattern
    filename: "[name].js",
  },

  // How to resolve encountered imports
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },

  // What extra processing to perform
  plugins: [
    new webpack.DefinePlugin({ ... }),
  ],

  // Adjust module resolution algorithm
  resolve: {
    alias: { ... },
  },
};

Webpack 的配置模型有時(shí)候會(huì)讓人感覺(jué)霧里看花，因?yàn)榕渲梦募嫶螅瑢傩蕴?。除非你理解每一個(gè)屬性的意義，否則很難理解 webpack 在做什么。讓你完全理解 webpack 配置的使用，是本書(shū)存在的主要目的之一。

使用 webpack 可以為每個(gè)包的名稱(chēng)注入一個(gè)哈希值（例如，app.d587bbd6.js），以便在版本更新后使客戶(hù)端上舊版本的包無(wú)效（重新下載）。包（bundle）拆分可以讓客戶(hù)端在理想情況下僅重新加載一小部分?jǐn)?shù)據(jù)。

你可能使用過(guò) LiveReload 或 BrowserSync 等工具。這些工具會(huì)在你進(jìn)行更改時(shí)自動(dòng)刷新瀏覽器。熱模塊更換（HMR）則更先進(jìn)，在使用 React 的情況下，應(yīng)用程序可以在不強(qiáng)制刷新頁(yè)面的情況下更新應(yīng)用。雖然這聽(tīng)起來(lái)沒(méi)什么特別，但它可以在實(shí)踐中大有不同。

HMR 不是webpack獨(dú)有的功能，通過(guò) livereactload 也可以在 Browserify 中使用 HMR。

Webpack 可以以多種方式拆分代碼。你甚至可以在應(yīng)用程序執(zhí)行時(shí)動(dòng)態(tài)加載代碼。因?yàn)橐蕾?lài)可以根據(jù)需要即時(shí)加載，所以延遲加載特別適用于體積龐大的應(yīng)用。

即使是小型應(yīng)用也可以得益于代碼拆分，因?yàn)樗试S用戶(hù)更快地獲得可用的東西。畢竟，性能是評(píng)價(jià)一個(gè)應(yīng)用的重要標(biāo)準(zhǔn)，了解這項(xiàng)技術(shù)是值得的。

Webpack 學(xué)習(xí)曲線(xiàn)比較陡峭。但是有了它，項(xiàng)目的長(zhǎng)期維護(hù)可以節(jié)省多少時(shí)間和精力，所以這是一個(gè)非常值得學(xué)習(xí)的工具。為了更好地了解 Webpack 與其他工具的比較，請(qǐng)查看官網(wǎng)上與其他工具的比較。

Webpack 不是萬(wàn)能的。但它確實(shí)很好地解決了打包問(wèn)題。在開(kāi)發(fā)過(guò)程中需要擔(dān)心的問(wèn)題又少了一件?；钣?package.json 和 webpack，走遍天下都不怕。

總結(jié)一下：

Webpack 是模塊打包器，但你也可以使用它運(yùn)行任務(wù)（譯者注：也就是順序運(yùn)行一系列操作）。

Webpack 底層基于依賴(lài)圖。Webpack 遍歷源文件構(gòu)建依賴(lài)圖，并以依賴(lài)圖和配置為基礎(chǔ)生成 bundle。

Webpack 依賴(lài)于 loader 和 plugin。loader 在模塊級(jí)別上運(yùn)行，而 plugin 依賴(lài)于 webpack 提供的鉤子，并且可以很好地訪問(wèn)其執(zhí)行過(guò)程。

Webpack 的配置描述了如何轉(zhuǎn)換“依賴(lài)圖”中的資源以及它應(yīng)該生成什么樣的輸出。如果要使用代碼拆分等功能，則可以將拆分指令寫(xiě)在源代碼中。

Webpack 如此受人喜愛(ài)的原因之一是熱模塊更換（HMR）。這個(gè)功能可以不刷新整頁(yè)而更新應(yīng)用代碼，開(kāi)發(fā)體驗(yàn)極好。

Webpack 可以為文件名生成哈希值，在內(nèi)容更改時(shí)，可以作廢瀏覽器緩存中上個(gè)版本的包。

在本書(shū)的下一部分中，你將學(xué)習(xí)使用 webpack 構(gòu)建開(kāi)發(fā)配置，同時(shí)了解更多相關(guān)概念。

T> 如果你對(duì) webpack 仍有疑問(wèn)或者不明白我們?yōu)槭裁葱枰粋€(gè)打包器，請(qǐng)閱讀Why would I use a Webpack?。