産品特色

編輯推薦

Webpack憑藉其強大的功能與良好的使用體驗，已經成為目前非常流行且社區非常活躍的打包工具，是現在進行Web開發必須掌握的技能之一。

本書是國內全麵、係統地講解Webpack的開山作，涵蓋瞭對Webpack入門、配置、實戰、優化、原理，以及新版特性的講解，並結閤作者自身的實戰經驗，介紹瞭Webpack的使用方法與常見的優化方法，深入講解瞭Webpack的原理與架構。

本書作者來自互聯網大廠一綫，有著全麵而紮實的技術體係，以及豐富的實戰經驗。相信各階段的Webpack用戶都能通過本書得到啓發，能快速從Webpack菜鳥變成高手，同時學到很多實戰經驗和前沿的前端技術。

內容簡介

隨著Web開發技術的發展，Webpack憑藉其便於使用和涵蓋麵廣的優勢，成為目前非常流行的前端構建工具，是每位前端工程師的必備技能之一。

《深入淺齣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》進一步提升對Webpack的理解，並在Web開發中更熟練地運用Webpack。

作者簡介

吳浩麟

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

精彩書評

Webpack憑藉其強大的功能與良好的使用體驗，已經成為目前非常流行且社區非常活躍的打包工具，是現在進行Web開發必須掌握的技能之一。作者結閤自身的實戰經驗，介紹瞭Webpack的使用方法與常見的優化方法，並深入講解瞭Webpack的原理與架構，相信各階段的Webpack用戶都能通過本書得到啓發。

——LeanCloud聯閤創始人、CEO 江宏

本書的內容包含多個主題，對Webpack的用法、配置、使用場景等都有涉及，並且提供瞭所有示例的源碼，可以作為Webpack官方文檔的補充。

——著名技術博主、《ES6標準入門》作者 阮一峰

我手邊需要這樣一本書，內容涵蓋Webpack，或者說涵蓋現代前端技術基礎、構建與優化的方方麵麵。如果你已經上手Webpack，那麼本書將帶領你進一步學習，真正掌握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

前言/序言

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的方式提齣問題，作者將詳細解答。

已收到 好好學習 天天嚮上

書冊質量很好，我非常喜歡

知識的羅列比較全，不過行文闡述缺乏深度，都是點到為止，要是能更多站在讀者角度來錶達則更好，看作者年齡非常小，估計這些要求有些難度。另外就是書太貴，定價*元還差不多。

你的孩子在我的身邊的人和你的生活狀態下擺著你們一起來看流星雨瞭我也不

比較實用，值得夠買！

還不錯，紙質一般

你的孩子在我的身邊的人和你的生活狀態下擺著你們一起來看流星雨瞭我也不

感謝京東給予的優質服務。第一天下的訂單，第二天就到瞭。自我認為十宗罪看著挺不錯的，我非常喜歡看。價格也挺優惠的，大傢喜歡的推薦大傢可以前來選購，好評好評！

此用戶未填寫評價內容