作者

吳浩麟

一線前端工程師，曾就職於騰訊，現就職於美團。專注於Web開發，參與過眾多大型Web專案的構建、設計和開發，喜歡探索Web前沿技術。也是Golang和音視頻技術的愛好者，活躍於GitHub，ID為gwuhaolin。

目錄

前言

Chapter01 入門
1.1 前端的發展
1.2 常見的建置工具及比較
1.3 安裝Webpack
1.4 使用Loader
1.5 使用Plugin
1.6 使用DevServer
1.7 核心概念

Chapter02 設定
2.1 Entry
2.2 Output
2.3 Module
2.4 Resolve
2.5 Plugin
2.6 DevServer
2.7 其他設定項目
2.8 整體設定結構
2.9 多種設定類型
2.10 歸納

Chapter03 實戰
3.1 使用ES6語言
3.2 使用TypeScript語言
3.3 使用Flow檢查器
3.4 使用SCSS語言
3.5 使用PostCSS
3.6 使用React架構
3.7 使用Vue架構
3.8 使用Angular2架構
3.9 為單頁應用產生HTML
3.10 管理多個單頁應用
3.11 建置同構應用
3.12 建置Electron應用
3.13 建置Npm模組
3.14 建置離線應用
3.15 搭配Npm Script
3.16 檢查程式
3.17 透過Node.js API啟動Webpack
3.18 使用Webpack Dev Middleware
3.19 載入圖片
3.20 載入SVG
3.21 載入Source Map
3.22 實戰歸納

Chapter04 最佳化
4.1 縮小檔案的搜索範圍
4.2 使用DllPlugin
4.3 使用HappyPack
4.4 使用ParallelUglifyPlugin
4.5 使用自動更新
4.6 開啟模組熱取代
4.7 區分環境
4.8 壓縮程式
4.9 CDN加速
4.10 使用Tree Shaking
4.11 分析公共程式
4.12 分割程式以隨選載入
4.13 使用Prepack
4.14 開啟Scope Hoisting
4.15 輸出分析
4.16 最佳化歸納

Chapter05 原理
5.1 工作原理概括
5.2 輸出檔案分析
5.3 撰寫Loader
5.4 撰寫Plugin
5.5 偵錯Webpack
5.6 原理歸納

AppendixA 常用的Loader
AppendixB 常用的Plugin
AppendixC Webpack的其他學習資源

序／導讀

前言

Web應用日益複雜，相關開發技術也百花齊放，這對前端建置工具提出了更高的要求。Webpack從許多建置工具中脫穎而出，成為目前最流行的建置工具，也幾乎成為目前前端開發裡的必備工具之一，因此每位前端工程師都應該掌握Webpack。

本書從實作出發，用簡單容易的實例帶領讀者快速入門Webpack，再結合實際工作中常用的場景列出實作案例，透過前3章的學習足以讓我們解決工作中的常見問題；本書還介紹了如何最佳化建置的速度和輸出，並解析了Webpack的工作原理，以及Plugin和Loader的撰寫方法，可幫助讀者進一步學習Webpack。本書按照入門、設定、實戰、最佳化和原理的路線層層深入，涵蓋了Webpack的各方面。

在撰寫本書時，Webpack已經到了3.8.1版本，本書涵蓋了對該版本的特性解析。由於Webpack從版本1到現在，其核心思想和API沒有發生很大的變化，所以本書的大部分內容適用於Webpack的任何穩定版本，但部分實例程式只適用於最新版本。

本書的每一小節都會提供與之對應的完整專案程式，在每節的最後附有下載連結，它們都有詳細的註釋並且可以正常執行，讀者可以在需要時下載這些程式。

在閱讀本書前，讀者需要掌握基本的Web開發技術，因為本書專注於Webpack，不會詳細介紹其他不相關的內容。

閱讀本書時，如果遇到任何不明白的地方，可以在本書的GitHub專案首頁上（https://github.com/gwuhaolin/dive-into-webpack）以提Issue的方式提出問題，作者將詳細解答。本書的簡體程式碼亦放在Github該專案頁上，將會不定期更新，請讀者隨時造訪該頁面下載最新的程式碼，繁體程式碼更新時間為本書出版之時，請至本公司官網http://www.topteam.cc/對應本書的部分下載即可。