摘要：資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值，在內容更改時，可以作廢瀏覽器緩存中上個版本的包。

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

涉及到的未翻譯單詞

input 輸入

output 輸出

entry 入口文件

bundle 包（打包結果）

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

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

T> 如果你想更詳細地了解構建工具及其歷史，請查看附錄 Comparison of Build Tools。

使用 webpack 構建工程，至少包括 input 和 output。打包處理從用戶定義的 entry 開始。entry 本身就是模塊，它可以通過 import 指向其他模塊。

當你使用 webpack 打包項目時，它會遍歷 import，構建項目的依賴關系圖，然后根據配置文件中的設定生成 output。你還可以定義分割點，以在項目代碼內拆分出多帶帶的 bundle（包）。

Webpack 支持開箱即用的 ES2015，CommonJS 和 AMD 模塊標準。loader 機制也適用于 CSS，通過 css-loader 在 css 文件中使用 @import 和 url()。你還可以找到某些實現特定功能的插件，例如壓縮，國際化，HMR等。

T> 依賴圖是描述節點如何相互關聯的有向圖。這個圖是通過文件之間的引用（require，import）構建的。Webpack 會在不執行資源的情況下靜態遍歷這些資源，并生成創建 bundle 所需的依賴圖。

Webpack 從 entry 開始運行。entry 通常是 JavaScript 模塊，webpack 從這里開始遍歷處理。在此過程中，webpack 根據 loader 配置轉換每個匹配到的模塊。

Entry 本身就是一個模塊。當 webpack 遇到 entry，webpack 會在文件系統匹配相關文件。除了 node_modules 之外，webpack 還可以對特定目錄執行查找。也可以調整 webpack 匹配文件擴展名的方式，也可以為目錄定義 aliases（別名）。這方面在 Consuming Packages 章節有更詳細的介紹。

如果 webpack 正確解析文件，對應 loader 會處理匹配的文件，不同的 loader 對模塊內容應用的轉換各不相同。如果解析失敗，webpack 會報運行時錯誤。

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

對 webpack loader 執行相同的解析過程。 你可以在選擇 loader 時使用相同的邏輯。由于這個原因，Loader 已經解析了自己的配置。如果 webpack 查找 loader 失敗，則會引發運行時錯誤。

T> Webpack 的解釋底層依賴于 enhanced-resolve 包。

Webpack 將在構造依賴圖時解析它遇到的每個模塊。如果 entry 包含依賴項，則將針對每個依賴項遞歸執行該過程，直到遍歷完成為止。 Webpack 可以針對任何文件類型執行此過程，這與 Babel 或 Sass 編譯器等專用工具不同。

Webpack 可以控制對不同資源的處理方式。例如，可以把資源內聯到 JavaScript 包以避免過多的網絡請求（譯者注：例如圖片轉 base64）。Webpack 還允許你使用 CSS 模塊等技術將樣式與組件結合，并避免標準 CSS 樣式問題。這種靈活性是 webpack 價值的體現。

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

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

如果所有 loader 都成功運行，則 webpack 會在最后一個包中包含源。 Plugins 可以在打包過程的不同階段攔截運行時事件。

雖然 loader 可以做很多事情，但它們不能為高級任務提供足夠的動力。Plugins 可以攔截 webpack 提供的運行時事件。一個很好的例子是由 MiniCssExtractPlugin 執行的包提取，當與 loader 一起使用時，從包中提取 CSS 文件并將其提取到多帶帶的文件中。如果沒有這一步，CSS 將在生成的 JavaScript 中內聯，因為 webpack 默認將所有代碼視為 JavaScript。CSS 提取將在 Separating CSS 一章中討論。

每個模塊都經過處理之后，webpack 生成 output。output 包括一個引導腳本，其中包含一個指引瀏覽器執行該項目的 manifest 文件。可以將 manifest 提取到多帶帶的文件中，本書后面會有相關介紹。output 會根據你使用的 build target 而有所不同（Web 不是唯一選擇）。

這并不是打包過程的全部內容。例如，你可以做代碼拆分，webpack 會在程序運行到所需功能時才加載的多帶帶包。這個話題會在 Code Splitting 章節中討論。

webpack 的核心依賴于配置。以下是根據官方 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 的配置模型有時候會讓人感覺霧里看花，因為配置文件太龐大，屬性太多。除非你理解每一個屬性的意義，否則很難理解 webpack 在做什么。讓你完全理解 webpack 配置的使用，是本書存在的主要目的之一。

使用 webpack 可以為每個包的名稱注入一個哈希值（例如，app.d587bbd6.js），以便在版本更新后使客戶端上舊版本的包無效（重新下載）。包（bundle）拆分可以讓客戶端在理想情況下僅重新加載一小部分數據。

你可能使用過 LiveReload 或 BrowserSync 等工具。這些工具會在你進行更改時自動刷新瀏覽器。熱模塊更換（HMR）則更先進，在使用 React 的情況下，應用程序可以在不強制刷新頁面的情況下更新應用。雖然這聽起來沒什么特別，但它可以在實踐中大有不同。

HMR 不是webpack獨有的功能，通過 livereactload 也可以在 Browserify 中使用 HMR。

Webpack 可以以多種方式拆分代碼。你甚至可以在應用程序執行時動態加載代碼。因為依賴可以根據需要即時加載，所以延遲加載特別適用于體積龐大的應用。

即使是小型應用也可以得益于代碼拆分，因為它允許用戶更快地獲得可用的東西。畢竟，性能是評價一個應用的重要標準，了解這項技術是值得的。

Webpack 學習曲線比較陡峭。但是有了它，項目的長期維護可以節省多少時間和精力，所以這是一個非常值得學習的工具。為了更好地了解 Webpack 與其他工具的比較，請查看官網上與其他工具的比較。

Webpack 不是萬能的。但它確實很好地解決了打包問題。在開發過程中需要擔心的問題又少了一件。活用 package.json 和 webpack，走遍天下都不怕。

總結一下：

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

Webpack 底層基于依賴圖。Webpack 遍歷源文件構建依賴圖，并以依賴圖和配置為基礎生成 bundle。

Webpack 依賴于 loader 和 plugin。loader 在模塊級別上運行，而 plugin 依賴于 webpack 提供的鉤子，并且可以很好地訪問其執行過程。

Webpack 的配置描述了如何轉換“依賴圖”中的資源以及它應該生成什么樣的輸出。如果要使用代碼拆分等功能，則可以將拆分指令寫在源代碼中。

Webpack 如此受人喜愛的原因之一是熱模塊更換（HMR）。這個功能可以不刷新整頁而更新應用代碼，開發體驗極好。

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

在本書的下一部分中，你將學習使用 webpack 構建開發配置，同時了解更多相關概念。

T> 如果你對 webpack 仍有疑問或者不明白我們為什么需要一個打包器，請閱讀Why would I use a Webpack?。