深入淺出Webpack

第1章 入門 1
1．1 前端的發(fā)展 2
1．1．1 模塊化 2
1．1．2 新框架 5
1．1．3 新語言 6
1．2 常見的構(gòu)建工具及對(duì)比 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到本項(xiàng)目 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 實(shí)時(shí)預(yù)覽 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 配置動(dòng)態(tài)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 其他配置項(xiàng) 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 導(dǎo)出一個(gè)Function 58
2．9．2 導(dǎo)出一個(gè)返回Promise的函數(shù) 60
2．9．3 導(dǎo)出多份配置 60
2．10 總結(jié) 61

第3章 實(shí)戰(zhàn) 62
3．1 使用ES6語言 62
3．1．1 認(rèn)識(shí)Babel 63
3．1．2 接入Babel 67
3．2 使用TypeScript語言 67
3．2．1 認(rèn)識(shí)TypeScript 67
3．2．2 減少代碼冗余 69
3．2．3 集成Webpack 69
3．3 使用Flow檢查器 70
3．3．1 認(rèn)識(shí)Flow 70
3．3．2 使用Flow 71
3．3．3 集成Webpack 72
3．4 使用SCSS語言 73
3．4．1 認(rèn)識(shí)SCSS 73
3．4．2 接入Webpack 74
3．5 使用PostCSS 75
3．5．1 認(rèn)識(shí)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 認(rèn)識(shí)Vue 81
3．7．2 接入Webpack 83
3．7．3 使用TypeScript編寫Vue應(yīng)用 84
3．8 使用Angular2框架 86
3．8．1 認(rèn)識(shí)Angular2 86
3．8．2 接入Webpack 89
3．9 為單頁應(yīng)用生成HTML 90
3．9．1 引入問題 90
3．9．2 解決方案 92
3．10 管理多個(gè)單頁應(yīng)用 95
3．10．1 引入問題 95
3．10．2 解決方案 98
3．11 構(gòu)建同構(gòu)應(yīng)用 101
3．11．1 認(rèn)識(shí)同構(gòu)應(yīng)用 101
3．11．2 解決方案 103
3．12 構(gòu)建Electron應(yīng)用 107
3．12．1 認(rèn)識(shí)Electron 107
3．12．2 接入Webpack 110
3．13 構(gòu)建Npm模塊 113
3．13．1 認(rèn)識(shí)Npm 113
3．13．2 拋出問題 113
3．13．3 使用Webpack構(gòu)建Npm模塊 115
3．13．4 發(fā)布到Npm 119
3．14 構(gòu)建離線應(yīng)用 120
3．14．1 認(rèn)識(shí)離線應(yīng)用 120
3．14．2 認(rèn)識(shí)Service Workers 121
3．14．3 接入Webpack 126
3．14．4 驗(yàn)證結(jié)果 129
3．15 搭配Npm Script 130
3．15．1 認(rèn)識(shí)Npm Script 130
3．15．2 Webpack為什么需要Npm Script 131
3．16 檢查代碼 132
3．16．1 代碼檢查具體是做什么的 133
3．16．2 怎么做代碼檢查 133
3．16．3 結(jié)合Webpack檢查代碼 136
3．17 通過Node．js API啟動(dòng)Webpack 138
3．17．1 安裝和使用Webpack模塊 139
3．17．2 以監(jiān)聽模式運(yùn)行 139
3．18 使用Webpack Dev Middleware 140
3．18．1 Webpack Dev Middleware支持的配置項(xiàng) 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 加載現(xiàn)有的Source Map 153
3．22 實(shí)戰(zhàn)總結(jié) 154
第4章 優(yōu)化 156
4．1 縮小文件的搜索范圍 157
4．1．1 優(yōu)化loader配置 157
4．1．2 優(yōu)化resolve．modules配置 158
4．1．3 優(yōu)化resolve．mainFields配置 159
4．1．4 優(yōu)化resolve．a(chǎn)lias配置 160
4．1．5 優(yōu)化resolve．extensions配置 162
4．1．6 優(yōu)化module．noParse配置 162
4．2 使用DllPlugin 163
4．2．1 認(rèn)識(shí)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 使用自動(dòng)刷新 176
4．5．1 文件監(jiān)聽 176
4．5．2 自動(dòng)刷新瀏覽器 179
4．6 開啟模塊熱替換 183
4．6．1 模塊熱替換的原理 183
4．6．2 優(yōu)化模塊熱替換 188
4．7 區(qū)分環(huán)境 189
4．7．1 為什么需要區(qū)分環(huán)境 189
4．7．2 如何區(qū)分環(huán)境 190
4．7．3 結(jié)合UglifyJS 192
4．7．4 第三方庫中的環(huán)境區(qū)分 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實(shí)現(xiàn)CDN的接入 202
4．10 使用Tree Shaking 204
4．10．1 認(rèn)識(shí)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實(shí)現(xiàn)按需加載 214
4．12．4 按需加載與ReactRouter 216
4．13 使用Prepack 218
4．13．1 認(rèn)識(shí)Prepack 218
4．13．2 接入Webpack 220
4．14 開啟Scope Hoisting 220
4．14．1 認(rèn)識(shí)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 優(yōu)化總結(jié) 229
第5章 原理 236
5．1 工作原理概括 236
5．1．1 基本概念 237
5．1．2 流程概括 237
5．1．3 流程細(xì)節(jié) 238
5．2 輸出文件分析 241
5．3 編寫Loader 248
5．3．1 Loader的職責(zé) 249
5．3．2 Loader基礎(chǔ) 249
5．3．3 Loader進(jìn)階 250
5．3．4 其他Loader API 253
5．3．5 加載本地Loader 254
5．3．6 實(shí)戰(zhàn) 256
5．4 編寫Plugin 257
5．4．1 Compiler和Compilation 258
5．4．2 事件流 258
5．4．3 常用的API 260
5．4．4 實(shí)戰(zhàn) 263
5．5 調(diào)試Webpack 265
5．6 原理總結(jié) 268
附錄A 常用的Loader 268
附錄B 常用的Plugin 271
附錄C 其他Webpack學(xué)習(xí)資源 273