深入淺出Webpack 版權(quán)信息
- ISBN:9787121331725
- 條形碼:9787121331725 ; 978-7-121-33172-5
- 裝幀:暫無
- 冊數(shù):暫無
- 重量:暫無
- 所屬分類:>>
深入淺出Webpack 本書特色
隨著Web開發(fā)技術(shù)的發(fā)展,Webpack憑借其便于使用和涵蓋面廣的優(yōu)勢,成為目前非常流行的前端構(gòu)建工具,是每位前端工程師的**技能之一。
《深入淺出Webpack》對Webpack進(jìn)行了全面講解,涵蓋了Webpack入門、配置、實(shí)戰(zhàn)、優(yōu)化、原理等方面的內(nèi)容。其中,第1章講解Webpack入門所涉及的知識;第2章詳細(xì)講解Webpack提供的常用配置項(xiàng);第3章結(jié)合實(shí)際項(xiàng)目中的常見場景進(jìn)行實(shí)踐;第4章給出優(yōu)化Webpack的優(yōu)秀方案;第5章剖析了Webpack的原理,并講解如何開發(fā)Plugin和Loader;附錄匯總了常見的Loader、Plugin和Webpack的其他學(xué)習(xí)資源。除了深入講解Webpack,本書還介紹了ES6、TypeScript、PostCSS、Prepack、離線緩存、單頁應(yīng)用、CDN等Web開發(fā)相關(guān)的技能。
無論是對 Webpack一無所知的初學(xué)者,還是經(jīng)驗(yàn)豐富的前端工程師,相信都能夠通過《深入淺出Webpack》進(jìn)一步提升對Webpack的理解,并在Web開發(fā)中更熟練地運(yùn)用Webpack。
深入淺出Webpack 內(nèi)容簡介
適讀人群 :無論是對 Webpack一無所知的初學(xué)者,還是經(jīng)驗(yàn)豐富的前端工程師,相信都能夠通過本書進(jìn)一步提升對Webpack的理解,并在Web開發(fā)中更熟練地運(yùn)用Webpack。
Webpack憑借其強(qiáng)大的功能與良好的使用體驗(yàn),已經(jīng)成為目前非常流行且社區(qū)非;钴S的打包工具,是現(xiàn)在進(jìn)行Web開發(fā)必須掌握的技能之一。
本書是國內(nèi)全面、系統(tǒng)地講解Webpack的開山作,涵蓋了對Webpack入門、配置、實(shí)戰(zhàn)、優(yōu)化、原理,以及新版特性的講解,并結(jié)合作者自身的實(shí)戰(zhàn)經(jīng)驗(yàn),介紹了Webpack的使用方法與常見的優(yōu)化方法,深入講解了Webpack的原理與架構(gòu)。
本書作者來自互聯(lián)網(wǎng)大廠一線,有著全面而扎實(shí)的技術(shù)體系,以及豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)。相信各階段的Webpack用戶都能通過本書得到啟發(fā),能快速從Webpack菜鳥變成高手,同時學(xué)到很多實(shí)戰(zhàn)經(jīng)驗(yàn)和前沿的前端技術(shù)。繁體版版權(quán)已輸出到臺灣。
深入淺出Webpack 目錄
第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到本項(xiàng)目 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 實(shí)時預(yù)覽 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 其他配置項(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)出一個Function 58
2.9.2 導(dǎo)出一個返回Promise的函數(shù) 59
2.9.3 導(dǎo)出多份配置 60
2.10 總結(jié) 61
第3章 實(shí)戰(zhàn) 62
3.1 使用ES6語言 63
3.1.1 認(rèn)識Babel 63
3.1.2 接入Babel 67
3.2 使用TypeScript語言 67
3.2.1 認(rèn)識TypeScript 67
3.2.2 減少代碼冗余 69
3.2.3 集成Webpack 69
3.3 使用Flow檢查器 70
3.3.1 認(rèn)識Flow 70
3.3.2 使用Flow 71
3.3.3 集成Webpack 72
3.4 使用SCSS語言 73
3.4.1 認(rèn)識SCSS 73
3.4.2 接入Webpack 74
3.5 使用PostCSS 75
3.5.1 認(rèn)識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 認(rèn)識Vue 81
3.7.2 接入Webpack 82
3.7.3 使用TypeScript編寫Vue應(yīng)用 83
3.8 使用Angular2框架 85
3.8.1 認(rèn)識Angular2 85
3.8.2 接入Webpack 88
3.9 為單頁應(yīng)用生成HTML 89
3.9.1 引入問題 89
3.9.2 解決方案 90
3.10 管理多個單頁應(yīng)用 94
3.10.1 引入問題 94
3.10.2 解決方案 96
3.11 構(gòu)建同構(gòu)應(yīng)用 100
3.11.1 認(rèn)識同構(gòu)應(yīng)用 100
3.11.2 解決方案 101
3.12 構(gòu)建Electron應(yīng)用 105
3.12.1 認(rèn)識Electron 105
3.12.2 接入Webpack 108
3.13 構(gòu)建Npm模塊 110
3.13.1 認(rèn)識Npm 110
3.13.2 拋出問題 111
3.13.3 使用Webpack構(gòu)建Npm模塊 112
3.13.4 發(fā)布到Npm 117
3.14 構(gòu)建離線應(yīng)用 118
3.14.1 認(rèn)識離線應(yīng)用 118
3.14.2 認(rèn)識Service Workers 119
3.14.3 接入Webpack 124
3.14.4 驗(yàn)證結(jié)果 126
3.15 搭配Npm Script 128
3.15.1 認(rèn)識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)聽模式運(yùn)行
137
3.18 使用Webpack Dev Middleware 138
3.18.1 Webpack Dev Middleware支持的配置項(xiàng) 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 實(shí)戰(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 認(rèn)識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實(shí)現(xiàn)CDN的接入 198
4.10 使用Tree Shaking 200
4.10.1 認(rèn)識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實(shí)現(xiàn)按需加載 210
4.12.4 按需加載與ReactRouter 212
4.13 使用Prepack 215
4.13.1 認(rèn)識Prepack 215
4.13.2 接入Webpack 216
4.14 開啟Scope Hoisting 217
4.14.1 認(rèn)識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 流程細(xì)節(jié) 235
5.2 輸出文件分析 238
5.3 編寫Loader 245
5.3.1 Loader的職責(zé) 246
5.3.2 Loader基礎(chǔ) 247
5.3.3 Loader進(jìn)階 247
5.3.4 其他Loader API 250
5.3.5 加載本地Loader 251
5.3.6 實(shí)戰(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 實(shí)戰(zhàn) 261
5.5 調(diào)試Webpack 262
5.6 原理總結(jié) 265
附錄A 常用的Loader 266
附錄B 常用的Plugin 270
附錄C Webpack的其他學(xué)習(xí)資源 273
展開全部
深入淺出Webpack 相關(guān)資料
Webpack憑借其強(qiáng)大的功能與良好的使用體驗(yàn),已經(jīng)成為目前非常流行且社區(qū)非常活躍的打包工具,是現(xiàn)在進(jìn)行Web開發(fā)必須掌握的技能之一。作者結(jié)合自身的實(shí)戰(zhàn)經(jīng)驗(yàn),介紹了Webpack的使用方法與常見的優(yōu)化方法,并深入講解了Webpack的原理與架構(gòu),相信各階段的Webpack用戶都能通過本書得到啟發(fā)。
——LeanCloud聯(lián)合創(chuàng)始人、CEO 江宏
本書的內(nèi)容包含多個主題,對Webpack的用法、配置、使用場景等都有涉及,并且提供了所有示例的源碼,可以作為Webpack官方文檔的補(bǔ)充。
——著名技術(shù)博主、《ES6標(biāo)準(zhǔn)入門》作者 阮一峰
我手邊需要這樣一本書,內(nèi)容涵蓋Webpack,或者說涵蓋現(xiàn)代前端技術(shù)基礎(chǔ)、構(gòu)建與優(yōu)化的方方面面。如果你已經(jīng)上手Webpack,那么本書將帶領(lǐng)你進(jìn)一步學(xué)習(xí),真正掌握Webpack!
——陸金所前端架構(gòu)師、前端外刊評論站長 寸志
深入淺出Webpack 作者簡介
吳浩麟
一線前端工程師,曾就職于騰訊,現(xiàn)就職于美團(tuán)。專注于Web開發(fā),參與過眾多大型Web項(xiàng)目的構(gòu)建、設(shè)計和開發(fā),喜歡探索Web前沿技術(shù)。也是Golang和音視頻技術(shù)的愛好者,活躍于GitHub,ID為gwuhaolin。