Webpack Book 翻譯計劃開坑

最近在深入學習 webpack，發現了一本不得了的開源書籍，從入門到每個細節，再到進階，基本都涵蓋了。現在我們使用 webpack 基本是借助腳手架之力，拿來即用。我也同意 webpack 配置是不應該背的，但是我們應該了解構成 webpack 配置的每一個部件負責的内容，而這本書對此是講的恰到好處，是以必須強烈安利一下！各位 webpack 熟練玩家也可以在目錄挑選自己感興趣的部分，看看作者對 webpack 的了解。

SURVIVEJS — WEBPACK https://survivejs.com/webpack/

有能力的話推薦看原版，至于這邊翻譯，坑是必須填的，每周一到兩更。翻譯完成後會用 docusaurus 整理，友善閱讀。

現在先把本書介紹翻譯過來吧~本章原文

介紹

Webpack 解決了 Web 開發的基本問題：打包，進而簡化了 Web 開發。它接收各種資源，例如 JavaScript，CSS 和 HTML，并将它們轉換為便于通過浏覽器使用的格式。這樣做很好地消除了 Web 開發帶來的巨大痛苦。

因為其配置驅動（configuration-driven）的實作，要學習 Webpack 并不簡單，但它非常強大。本指南的目的是從 0 教你如何使用 webpack，并深入了解 webpack。

什麼是 Webpack

Web 浏覽器用于浏覽 HTML，CSS 和 JavaScript。随着項目的發展，跟蹤和配置所有檔案變得過于複雜，不借助工具實在難以維護。Webpack 旨在解決這個問題。管理的複雜性是 Web 開發面對的基本問題之一，解決這個問題是必須的。

打包工具不隻有 Webpack，一系列不同的工具已經出現了。任務運作者，如 Grunt 和 Gulp 都是不錯的上層（與底層相對）工具。但問題是你需要手寫工作流程，把這一步交給打包工具（例如 webpack），是前端項目建構向前的一大步。

Webpack 如何改變現狀

Webpack 采取另一種方式。它允許你将項目視為一個依賴圖。你可以在項目中使用 index.js 通過标準的

require

或

import

語句引入項目所需的依賴項。如果需要，你甚至可以以相同的方式引用樣式檔案和其他資源。

Webpack 為你完成所有預處理，并根據你提供的配置檔案生成生産包，配置檔案功能多樣，但不容易學習。

在你開始了解 Webpack 的工作原理後，Webpack 将成為不可或缺的工具。希望你看完本書可以從入門到精通 webpack。

你能學到什麼

本書旨在補充 webpack的官方文檔。你可以同時閱讀文檔和本書。

本書教你開發用于開發環境和生産環境的可組合 webpack 配置。本書涵蓋的進階技術可以讓你充分利用webpack 4。

這本書的結構

本書首先解釋了 webpack 是什麼。之後的章節會從不同的角度讨論 webpack。在閱讀這些章節時，你可以開發自己的 webpack 配置，同時學習一些基本技巧。

這本書分為以下幾部分：

• 開發（Developing） 教你運作 webpack。此部分介紹了浏覽器自動重新整理等功能，并說明了如何組合配置以使其保持可維護狀态。
• 樣式（Styling） 重點介紹樣式相關問題。你将學習如何使用 webpack 加載樣式以及如何在設定中使用 autoprefix 等技術。
• 加載（Loading） 詳細解釋 webpack loader，告訴你如何加載圖檔、字型和 JavaScript 檔案等資源。
• 建構（Building） 介紹 source maps 和 bundle/代碼拆分的思想，教你如何整理建構所得的檔案。
• 優化（Optimizing） 将你的建構提高到生産品質水準，通過調整壓縮它的體積，并學習 webpack 性能優化。
• 輸出（Output） 讨論了 webpack 輸出的相關技術。你将了解如何使用 webpack 管理多頁面設定，并了解服務端渲染的基本概念。
• 技術（Techniques） 讨論了幾個話題：動态加載，Web worker，i18n，應用程式部署，以及通過 webpack 使用 npm 包。
• 擴充 展示如何擴充 loader 和 plugin。

最後，有一個簡短的總結章節回顧了本書的要點。它包含本書中的技術清單，讓你條理清晰地完成你的項目。

本書末尾的附錄涵蓋了一些次要主題或是深入探讨前面提到的主要内容。你可以以自己喜歡的順序閱讀本書。

最後的 Troubleshooting 附錄介紹了當 webpack 報錯時該怎麼做。閱讀本書時如有疑問，可以看看附錄。如果你不清楚一些術語及其含義，請參閱本書末尾的 Glossary。

誰适合看這本書

你應具備 JavaScript，Node 和 npm 的基本知識。如果你對 webpack 已經有初步了解，那就更好了。通過閱讀本書，你可以加深對這些工具的了解。

如果你對 webpack 所知之甚少，請考慮仔細閱讀本書前半部分。如果你已經了解 webpack，請選擇你認為有價值的技術浏覽。

如果你已經熟悉了 webpack，那麼本書中仍有一些内容為你所寫。看看你是否有什麼新技術可以采用。特别是閱讀本章末尾和本書最後一章的摘要。

本書的版本

因本書的創新，獲得了相當多的維護和改進，是以必須有一個版本控制方案。每個新版本的發行說明都儲存在本書部落格。你也可以使用 GitHub compare 工具對比版本間差異：

https://github.com/survivejs/webpack-book/compare/v2.1.7...v2.4.1
           

該頁面顯示了在給定版本範圍之間的各個送出。你還可以在本書已修改的地方。

本書的目前版本是 2.4.1。

獲得支援

如果你遇到麻煩或與内容相關的問題，可以選擇以下幾種方法：

• 在 GitHub Issue 聯系我。
• 加入我的 Gitter Chat。
• 發送電子郵件至[email protected]。
• 在SurviveJS AmA 上向我詢問有關 webpack 的任何問題。

如果你在 Stack Overflow 釋出問題，請使用 survivaljs 标記它們。你可以在 Twitter 上使用 #survivaljs。

附加材料

你可以從以下來源找到更多相關材料：

• 加入訂閱擷取不定期更新。
• 在 Twitter 關注 @survivejs。
• 訂閱部落格 RSS 以擷取通路訪談等。
• 訂閱Youtube頻道。
• 檢視 [SurviveJS 相關幻燈片]（https://presentations.survive...）。

緻謝

Big thanks to Christian Alfoni for helping me craft the first version of this book. This is what inspired the entire SurviveJS effort. The version you see now is a complete rewrite.

This book wouldn’t be half as good as it's without patient editing and feedback by my editors Jesús Rodríguez, Artem Sapegin, and Pedr Browne. Thank you.

This book wouldn’t have been possible without the original "SurviveJS - Webpack and React" effort. Anyone who contributed to it deserves my thanks. You can check that book for more accurate attributions.

Thanks to Mike "Pomax" Kamermans, Cesar Andreu, Dan Palmer, Viktor Jančík, Tom Byrer, Christian Hettlage, David A. Lee, Alexandar Castaneda, Marcel Olszewski, Steve Schwartz, Chris Sanders, Charles Ju, Aditya Bhardwaj, Rasheed Bustamam, José Menor, Ben Gale, Jake Goulding, Andrew Ferk, gabo, Giang Nguyen, @Coaxial, @khronic, Henrik Raitasola, Gavin Orland, David Riccitelli, Stephen Wright, Majky Bašista, Gunnari Auvinen, Jón Levy, Alexander Zaytsev, Richard Muller, Ava Mallory (Fiverr), Sun Zheng’an, Nancy (Fiverr), Aluan Haddad, Steve Mao, Craig McKenna, Tobias Koppers, Stefan Frede, Vladimir Grenaderov, Scott Thompson, Rafael De Leon, Gil Forcada Codinachs, Jason Aller, @pikeshawn, Stephan Klinger, Daniel Carral, Nick Yianilos, Stephen Bolton, Felipe Reis, Rodolfo Rodriguez, Vicky Koblinski, Pyotr Ermishkin, Ken Gregory, Dmitry Kaminski, John Darryl Pelingo, Brian Cui, @st-sloth, Nathan Klatt, Muhamadamin Ibragimov, Kema Akpala, Roberto Fuentes, Eric Johnson, Luca Poldelmengo, Giovanni Iembo, Dmitry Anderson , and many others who have contributed direct feedback for this book!