Web 應用日益復雜，相關(guān)開發(fā)技術(shù)也百花齊放，這對前端構(gòu)建工具提出了更高的要求。Webpack 從眾多構(gòu)建工具中脫穎而出，成為目前最流行的構(gòu)建工具，也幾乎成為目前前端開發(fā)里的必備工具之一，因此每位緊跟時代的前端工程師都應該掌握Webpack。
本書從實踐出發(fā)，用簡單易懂的例子帶領(lǐng)讀者快速入門Webpack，再結(jié)合實際工作中常用的場景給出實踐案例，通過前3章的學習足以讓我們解決工作中的常見問題；本書還介紹了如何優(yōu)化構(gòu)建的速度和輸出，并解析了Webpack的工作原理，以及Plugin和Loader的編寫方法，可幫助讀者進一步學習Webpack。本書按照入門、配置、實戰(zhàn)、優(yōu)化和原理的路線層層深入，涵蓋了Webpack的方方面面。
在編寫本書時，Webpack已經(jīng)迭代到了3.8.1版本，本書涵蓋了對該版本的特性解析。由于Webpack從版本1到現(xiàn)在，其核心思想和API沒有發(fā)生很大的變化，所以本書的大部分內(nèi)容適用于Webpack的任何穩(wěn)定版本，但部分實例代碼只適用于最新版本。
本書的每一小節(jié)都會提供與之對應的完整項目代碼，在每節(jié)的最后附有下載鏈接，它們都有詳細的注釋并且可以正常運行，我們可以在需要時下載這些代碼。
在閱讀本書前，我們需要掌握基本的Web開發(fā)技術(shù)，因為本書專注于Webpack，不會詳細介紹其他不相關(guān)的內(nèi)容。
在閱讀本書時，如果遇到任何不明白的地方，則都可以在本書的GitHub項目主頁上（https://github.com/gwuhaolin/dive-into-webpack）以提Issue的方式提出問題，作者將詳細解答。
第1章 入門 1
1.1 前端的發(fā)展 2
1.1.1 模塊化 2
1.1.2 新框架 5
1.1.3 新語言 6
1.2 常見的構(gòu)建工具及對比 8
1.2.1 Npm Script 9
1.2.2 Grunt 10
1.2.3 Gulp 11
1.2.4 Fis3 12
1.2.5 Webpack 14
1.2.6 Rollup 15
1.2.7 為什么選擇Webpack 16
1.3 安裝Webpack 17
1.3.1 安裝Webpack到本項目 17
1.3.2 安裝Webpack到全局 18
1.3.3 使用Webpack 18
1.4 使用Loader 20
1.5 使用Plugin 22
1.6 使用DevServer 24
1.6.1 實時預覽 25
1.6.2 模塊熱替換 26
1.6.3 支持Source Map 26
1.7 核心概念 27
第2章 配置 29
2.1 Entry 30
2.1.1 context 30
2.1.2 Entry類型 31
2.1.3 Chunk的名稱 31
2.1.4 配置動態(tài)Entry 32
2.2 Output 32
2.2.1 filename 32
2.2.2 chunkFilename 33
2.2.3 path 34
2.2.4 publicPath 34
2.2.5 crossOriginLoading 34
2.2.6 libraryTarget 和 library 35
2.2.7 libraryExport 37
2.3 Module 38
2.3.1 配置Loader 38
2.3.2 noParse 40
2.3.3 parser 41
2.4 Resolve 41
2.4.1 alias 42
2.4.2 mainFields 42
2.4.3 extensions 43
2.4.4 modules 43
2.4.5 descriptionFiles 44
2.4.6 enforceExtension 44
2.4.7 enforceModuleExtension 44
2.5 Plugin 44
2.6 DevServer 45
2.6.1 hot 45
2.6.2 inline 46
2.6.3 historyApiFallback 46
2.6.4 contentBase 47
2.6.5 headers 48
2.6.6 host 48
2.6.7 port 48
2.6.8 allowedHosts 48
2.6.9 disableHostCheck 49
2.6.10 https 49
2.6.11 clientLogLevel 50
2.6.12 compress 50
2.6.13 open 50
2.7 其他配置項 50
2.7.1 Target 50
2.7.2 Devtool 51
2.7.3 Watch和WatchOptions 51
2.7.4 Externals 52
2.7.5 ResolveLoader 53
2.8 整體配置結(jié)構(gòu) 54
2.9 多種配置類型 58
2.9.1 導出一個Function 58
2.9.2 導出一個返回Promise的函數(shù) 59
2.9.3 導出多份配置 60
2.10 總結(jié) 61
第3章 實戰(zhàn) 62
3.1 使用ES6語言 63
3.1.1 認識Babel 63
3.1.2 接入Babel 67
3.2 使用TypeScript語言 67
3.2.1 認識TypeScript 67
3.2.2 減少代碼冗余 69
3.2.3 集成Webpack 69
3.3 使用Flow檢查器 70
3.3.1 認識Flow 70
3.3.2 使用Flow 71
3.3.3 集成Webpack 72
3.4 使用SCSS語言 73
3.4.1 認識SCSS 73
3.4.2 接入Webpack 74
3.5 使用PostCSS 75
3.5.1 認識PostCSS 75
3.5.2 接入Webpack 76
3.6 使用React框架 77
3.6.1 React的語法特征 77
3.6.2 React與Babel 78
3.6.3 React與TypeScript 79
3.7 使用Vue框架 80
3.7.1 認識Vue 81
3.7.2 接入Webpack 82
3.7.3 使用TypeScript編寫Vue應用 83
3.8 使用Angular2框架 85
3.8.1 認識Angular2 85
3.8.2 接入Webpack 88
3.9 為單頁應用生成HTML 89
3.9.1 引入問題 89
3.9.2 解決方案 90
3.10 管理多個單頁應用 94
3.10.1 引入問題 94
3.10.2 解決方案 96
3.11 構(gòu)建同構(gòu)應用 100
3.11.1 認識同構(gòu)應用 100
3.11.2 解決方案 101
3.12 構(gòu)建Electron應用 105
3.12.1 認識Electron 105
3.12.2 接入Webpack 108
3.13 構(gòu)建Npm模塊 110
3.13.1 認識Npm 110
3.13.2 拋出問題 111
3.13.3 使用Webpack構(gòu)建Npm模塊 112
3.13.4 發(fā)布到Npm 117
3.14 構(gòu)建離線應用 118
3.14.1 認識離線應用 118
3.14.2 認識Service Workers 119
3.14.3 接入Webpack 124
3.14.4 驗證結(jié)果 126
3.15 搭配Npm Script 128
3.15.1 認識Npm Script 128
3.15.2 Webpack為什么需要Npm Script 129
3.16 檢查代碼 130
3.16.1 代碼檢查具體是做什么的 130
3.16.2 怎么做代碼檢查 131
3.16.3 結(jié)合Webpack檢查代碼 133
3.17 通過Node.js API啟動Webpack 136
3.17.1 安裝和使用Webpack模塊 136
3.17.2 以監(jiān)聽模式運行
137
3.18 使用Webpack Dev Middleware 138
3.18.1 Webpack Dev Middleware支持的配置項 139
3.18.2 Webpack Dev Middleware與模塊熱替換 140
3.19 加載圖片 142
3.19.1 使用file-loader 142
3.19.2 使用url-loader 143
3.20 加載SVG 145
3.20.1 使用raw-loader 146
3.20.2 使用svg-inline-loader 147
3.21 加載Source Map 148
3.21.1 該如何選擇 150
3.21.2 加載現(xiàn)有的Source Map 150
3.22 實戰(zhàn)總結(jié) 151
第4章 優(yōu)化 153
4.1 縮小文件的搜索范圍 154
4.1.1 優(yōu)化Loader配置 154
4.1.2 優(yōu)化resolve.modules配置 155
4.1.3 優(yōu)化resolve.mainFields配置 156
4.1.4 優(yōu)化resolve.alias配置 157
4.1.5 優(yōu)化resolve.extensions配置 159
4.1.6 優(yōu)化module.noParse配置 159
4.2 使用DllPlugin 160
4.2.1 認識DLL 160
4.2.2 接入Webpack 161
4.3 使用HappyPack 166
4.3.1 使用HappyPack 167
4.3.2 HappyPack的原理 170
4.4 使用ParallelUglifyPlugin 170
4.5 使用自動刷新 173
4.5.1 文件監(jiān)聽 173
4.5.2 自動刷新瀏覽器 176
4.6 開啟模塊熱替換 180
4.6.1 模塊熱替換的原理 180
4.6.2 優(yōu)化模塊熱替換 184
4.7 區(qū)分環(huán)境 186
4.7.1 為什么需要區(qū)分環(huán)境 186
4.7.2 如何區(qū)分環(huán)境 186
4.7.3 結(jié)合UglifyJS 188
4.7.4 第三方庫中的環(huán)境區(qū)分 188
4.8 壓縮代碼 189
4.8.1 壓縮JavaScript 190
4.8.2 壓縮ES6 192
4.8.3 壓縮CSS 193
4.9 CDN加速 195
4.9.1 什么是CDN 195
4.9.2 接入CDN 196
4.9.3 用Webpack實現(xiàn)CDN的接入 198
4.10 使用Tree Shaking 200
4.10.1 認識Tree Shaking 200
4.10.2 接入Tree Shaking 201
4.11 提取公共代碼 204
4.11.1 為什么需要提取公共代碼 204
4.11.2 如何提取公共代碼 205
4.11.3 如何通過Webpack提取公共代碼 206
4.12 分割代碼以按需加載 209
4.12.1 為什么需要按需加載 209
4.12.2 如何使用按需加載 209
4.12.3 用Webpack實現(xiàn)按需加載 210
4.12.4 按需加載與ReactRouter 212
4.13 使用Prepack 215
4.13.1 認識Prepack 215
4.13.2 接入Webpack 216
4.14 開啟Scope Hoisting 217
4.14.1 認識Scope Hoisting 217
4.14.2 使用Scope Hoisting 218
4.15 輸出分析 219
4.15.1 官方的可視化分析工具 220
4.15.2
webpack-bundle-analyzer 224
4.16 優(yōu)化總結(jié) 226
第5章 原理 233
5.1 工作原理概括 234
5.1.1 基本概念 234
5.1.2 流程概括 234
5.1.3 流程細節(jié) 235
5.2 輸出文件分析 238
5.3 編寫Loader 245
5.3.1 Loader的職責 246
5.3.2 Loader基礎(chǔ) 247
5.3.3 Loader進階 247
5.3.4 其他Loader API 250
5.3.5 加載本地Loader 251
5.3.6 實戰(zhàn) 253
5.4 編寫Plugin 254
5.4.1 Compiler和Compilation 255
5.4.2 事件流 256
5.4.3 常用的API 257
5.4.4 實戰(zhàn) 261
5.5 調(diào)試Webpack 262
5.6 原理總結(jié) 265
附錄A 常用的Loader 266
附錄B 常用的Plugin 270
附錄C Webpack的其他學習資源 273
新書資訊