深入淺出Webpack

《深入淺出Webpack 》是2018年電子工業出版社出版的一本書籍，書籍的作者是吳浩麟。

基本介紹

• 書名：深入淺出Webpack
• 作者：吳浩麟
• 出版社：電子工業出版社
• 出版時間：2018年

內容簡介

隨著Web開發技術的發展，Webpack憑藉其便於使用和涵蓋面廣的優勢，成為目前非常流行的前端構建工具，是每位前端工程師的必備技能之一。本書對Webpack進行了全面講解，涵蓋了Webpack入門、配置、實戰、最佳化、原理等方面的內容。

其中，第1章講解Webpack入門所涉及的知識；第2章詳細講解Webpack提供的常用配置項；第3章結合實際項目中的常見場景進行實踐；第4章給出最佳化Webpack的優秀方案；第5章剖析了Webpack的原理，並講解如何開發Plugin和Loader；附錄匯總了常見的Loader、Plugin和Webpack的其他學習資源。除了深入講解Webpack，本書還介紹了ES6、TypeScript、PostCSS、Prepack、離線快取、單頁套用、CDN等Web開發相關的技能。無論是對 Webpack一無所知的初學者，還是經驗豐富的前端工程師，相信都能夠通過本書進一步提升對Webpack的理解，並在Web開發中更熟練地運用Webpack。

圖書目錄

第1章 入門 1

1.1 前端的發展 2

1.1.1 模組化 2

1.1.2 新框架 5

1.1.3 新語言 6

1.2 常見的構建工具及對比 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 16

1.3.1 安裝Webpack到本項目 17

1.3.2 安裝Webpack到全局 17

1.3.3 使用Webpack 18

1.4 使用Loader 20

1.5 使用Plugin 22

1.6 使用DevServer 24

1.6.1 實時預覽 25

1.6.2 模組熱替換 25

1.6.3 支持Source Map 26

1.7 核心概念 27

第2章 配置 28

2.1 Entry 29

2.1.1 context 29

2.1.2 Entry類型 30

2.1.3 Chunk名稱 30

2.1.4 配置動態Entry 31

2.2 Output 31

2.2.1 filename 31

2.2.2 chunkFilename 32

2.2.3 path 33

2.2.4 publicPath 33

2.2.5 crossOriginLoading 33

2.2.6 libraryTarget 和 library 34

2.2.7 libraryExport 36

2.3 Module 37

2.3.1 配置Loader 37

2.3.2 noParse 39

2.3.3 parser 40

2.4 Resolve 41

2.4.1 alias 41

2.4.2 mainFields 42

2.4.3 extensions 42

2.4.4 modules 43

2.4.5 descriptionFiles 43

2.4.6 enforceExtension 43

2.4.7 enforceModuleExtension 44

2.5 Plugin 44

2.6 devServer 45

2.6.1 hot 45

2.6.2 inline 45

2.6.3 historyApiFallback 46

2.6.4 contentBase 47

2.6.5 headers 47

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 49

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 整體配置結構 54

2.9 多種配置類型 58

2.9.1 導出一個Function 58

2.9.2 導出一個返回Promise的函式 60

2.9.3 導出多份配置 60

2.10 總結 61

第3章 實戰 62

3.1 使用ES6語言 62

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 77

3.6 使用React框架 78

3.6.1 React的語法特徵 78

3.6.2 React與Babel 78

3.6.3 React與TypeScript 79

3.7 使用Vue框架 81

3.7.1 認識Vue 81

3.7.2 接入Webpack 83

3.7.3 使用TypeScript編寫Vue套用 84

3.8 使用Angular2框架 86

3.8.1 認識Angular2 86

3.8.2 接入Webpack 89

3.9 為單頁套用生成HTML 90

3.9.1 引入問題 90

3.9.2 解決方案 92

3.10 管理多個單頁套用 95

3.10.1 引入問題 95

3.10.2 解決方案 98

3.11 構建同構套用 101

3.11.1 認識同構套用 101

3.11.2 解決方案 103

3.12 構建Electron套用 107

3.12.1 認識Electron 107

3.12.2 接入Webpack 110

3.13 構建Npm模組 113

3.13.1 認識Npm 113

3.13.2 拋出問題 113

3.13.3 使用Webpack構建Npm模組 115

3.13.4 發布到Npm 119

3.14 構建離線套用 120

3.14.1 認識離線套用 120

3.14.2 認識Service Workers 121

3.14.3 接入Webpack 126

3.14.4 驗證結果 129

3.15 搭配Npm Script 130

3.15.1 認識Npm Script 130

3.15.2 Webpack為什麼需要Npm Script 131

3.16 檢查代碼 132

3.16.1 代碼檢查具體是做什麼的 133

3.16.2 怎么做代碼檢查 133

3.16.3 結合Webpack檢查代碼 136

3.17 通過Node.js API啟動Webpack 138

3.17.1 安裝和使用Webpack模組 139

3.17.2 以監聽模式運行 139

3.18 使用Webpack Dev Middleware 140

3.18.1 Webpack Dev Middleware支持的配置項 141

3.18.2 Webpack Dev Middleware與模組熱替換 143

3.19 載入圖片 145

3.19.1 使用file-loader 145

3.19.2 使用url-loader 146

3.20 載入SVG 148

3.20.1 使用raw-loader 149

3.20.2 使用svg-inline-loader 150

3.21 載入Source Map 151

3.21.1 該如何選擇 152

3.21.2 載入現有的Source Map 153

3.22 實戰總結 154

第4章 最佳化 156

4.1 縮小檔案的搜尋範圍 157

4.1.1 最佳化loader配置 157

4.1.2 最佳化resolve.modules配置 158

4.1.3 最佳化resolve.mainFields配置 159

4.1.4 最佳化resolve.alias配置 160

4.1.5 最佳化resolve.extensions配置 162

4.1.6 最佳化module.noParse配置 162

4.2 使用DllPlugin 163

4.2.1 認識DLL 163

4.2.2 接入Webpack 164

4.3 使用HappyPack 170

4.3.1 使用HappyPack 170

4.3.2 HappyPack的原理 173

4.4 使用ParallelUglifyPlugin 173

4.5 使用自動刷新 176

4.5.1 檔案監聽 176

4.5.2 自動刷新瀏覽器 179

4.6 開啟模組熱替換 183

4.6.1 模組熱替換的原理 183

4.6.2 最佳化模組熱替換 188

4.7 區分環境 189

4.7.1 為什麼需要區分環境 189

4.7.2 如何區分環境 190

4.7.3 結合UglifyJS 192

4.7.4 第三方庫中的環境區分 192

4.8 壓縮代碼 193

4.8.1 壓縮JavaScript 193

4.8.2 壓縮ES6 195

4.8.3 壓縮 CSS 197

4.9 CDN加速 198

4.9.1 什麼是CDN 198

4.9.2 接入CDN 199

4.9.3 用Webpack實現CDN的接入 202

4.10 使用Tree Shaking 204

4.10.1 認識Tree Shaking 204

4.10.2 接入Tree Shaking 205

4.11 提取公共代碼 208

4.11.1 為什麼需要提取公共代碼 208

4.11.2 如何提取公共代碼 208

4.11.3 如何通過Webpack提取公共代碼 210

4.12 分割代碼以按需載入 213

4.12.1 為什麼需要按需載入 213

4.12.2 如何使用按需載入 213

4.12.3 用Webpack實現按需載入 214

4.12.4 按需載入與ReactRouter 216

4.13 使用Prepack 218

4.13.1 認識Prepack 218

4.13.2 接入Webpack 220

4.14 開啟Scope Hoisting 220

4.14.1 認識Scope Hoisting 221

4.14.2 使用Scope Hoisting 222

4.15 輸出分析 223

4.15.1 官方的可視化分析工具 224

4.15.2 webpack-bundle-analyzer 228

4.16 最佳化總結 229

第5章 原理 236

5.1 工作原理概括 236

5.1.1 基本概念 237

5.1.2 流程概括 237

5.1.3 流程細節 238

5.2 輸出檔案分析 241

5.3 編寫Loader 248

5.3.1 Loader的職責 249

5.3.2 Loader基礎 249

5.3.3 Loader進階 250

5.3.4 其他Loader API 253

5.3.5 載入本地Loader 254

5.3.6 實戰 256

5.4 編寫Plugin 257

5.4.1 Compiler和Compilation 258

5.4.2 事件流 258

5.4.3 常用的API 260

5.4.4 實戰 263

5.5 調試Webpack 265

5.6 原理總結 268

附錄A 常用的Loader 268

附錄B 常用的Plugin 271

附錄C 其他Webpack學習資源 273