Webpack 實戰：入門、進階與調優, 2/e

購買商店

Webpack 實戰：入門、進階與調優, 2/e

$594.00

馬上購買

內容描述

這是一本講解如何使用Webpack構建現代Web應用的著作。
第1版豆瓣評分8.6，京東和噹噹好評率近99.9%，
是前端領域的暢銷書，被讀者公認為是Webpack領域的標準性著作。
全書圍繞Webpack的功能特性、工作原理、性能優化、項目實戰4個維度全面展開，
從基本的使用場景到復雜的應用實例，再到系統性的優化，由淺入深講解Webpack的各個特性，
同時剖析其背後的工作原理，讓讀者能零基礎快速掌握Webpack並輕鬆實現進階。
作者是資深的前端技術專家，是知名開源打包工具YKit的主導者和核心開發者，也是Webpack堅定不移的佈道者。
本書內容全部來自作者的實戰經驗，盡量避開了網絡上已經發表的各種公開資料，思路簡潔、深入，原理與實操並重。
與第1版相比，第2版做瞭如下更新：
（1）結合WebpackZ新的技術，對全書內容進行了全面更新；
（2）收集並分析了讀者對第1版的反饋，完善了第1版的不足之處；
（3）新增了分析Webpack打包原理的章節；
（4）新增了2個關於React和Vue的綜合案例。
相比第1版，第2版內容更新、更全、更深入，實戰性更強。

目錄大綱

前言
第1章　Webpack簡介1
1.1　何為Webpack1
1.2　為什麼需要Webpack2
1.2.1　何為模塊2
1.2.2　JavaScript中的模塊3
1.2.3　模塊打包工具4
1.2.4　為什麼選擇Webpack5
1.3　安裝5
1.4　打包第一個應用7
1.4.1　Hello World7
1.4.2　使用npm scripts9
1.4.3　使用默認目錄配置10
1.4.4　使用配置文件10
1.4.5　webpack-dev-server13
1.5　本章小結15
第2章　　模塊打包17
2.1　CommonJS17
2.1.1　模塊18
2.1.2　導出18
2.1.3　導入20
2.2　ES6 Module22
2.2.1　模塊22
2.2.2　導出23
2.2.3　導入24
2.2.4　複合寫法26
2.3　CommonJS與ES6 Module的區別26
2.3.1　動態與靜態26
2.3.2　值複製與動態映射27
2.3.3　循環依賴29
2.4　加載其他類型的模塊33
2.4.1　非模塊化文件34
2.4.2　AMD34
2.4.3　UMD35
2.4.4　加載npm模塊37
2.5　模塊打包原理38
2.6　本章小結41
第3章　資源的輸入和輸出42
3.1　資源處理流程42
3.2　配置資源入口44
3.2.1　context44
3.2.2　entry45
3.2.3　實例47
3.3　配置資源出口50
3.3.1　filename50
3.3.2　path53
3.3.3　publicPath54
3.3.4　實例56
3.4　本章小結57
第4章　預處理器59
4.1　一切皆模塊59
4.2　loader概述61
4.3　loader的配置63
4.3.1　loader的引入63
4.3.2　鍊式loader65
4.3.3　loader options65
4.3.4　更多配置66
4.4　常用loader介紹70
4.4.1　babel-loader70
4.4.2　ts-loader72
4.4.3　html-loader73
4.4.4　handlebars-loader73
4.4.5　file-loader74
4.4.6　url-loader77
4.5　自定義loader78
4.6　本章小結82
第5章　樣式處理83
5.1　分離樣式文件83
5.1.1　extract-text-webpack-plugin84
5.1.2　多樣式文件的處理86
5.1.3　mini-css-extract-plugin88
5.2　樣式預處理90
5.2.1　Sass與SCSS90
5.2.2　Less92
5.3　PostCSS93
5.3.1　PostCSS與Webpack93
5.3.2　自動前綴94
5.3.3　stylelint95
5.3.4　CSSNext96
5.4　CSS Modules98
5.5　本章小結99
第6章　代碼分片100
6.1　通過入口劃分代碼100
6.2　CommonsChunkPlugin101
6.2.1　提取vendor104
6.2.2　設置提取範圍105
6.2.3　設置提取規則106
6.2.4　hash與長效緩存108
6.2.5　CommonsChunkPlugin的不足110
6.3　optimization.SplitChunks111
6.3.1　從命令式到聲明式113
6.3.2　默認的異步提取114
6.3.3　配置115
6.4　資源異步加載116
6.4.1　import()116
6.4.2　異步chunk的配置119
6.5　本章小結120
第7章　生產環境配置121
7.1　環境配置的封裝121
7.2　開啟production模式123
7.3　環境變量124
7.4　source-map125
7.4.1　source-map原理125
7.4.2　source-map配置126
7.4.3　source-map安全128
7.5　資源壓縮129
7.5.1　壓縮JavaScript129
7.5.2　壓縮CSS131
7.6　緩存132
7.6.1　資源hash132
7.6.2　輸出動態HTML133
7.6.3　使chunk id更穩定135
7.7　bundle體積監控和分析137
7.8　本章小結139
第8章　打包優化140
8.1　HappyPack140
8.1.1　工作原理141
8.1.2　單個loader的優化141
8.1.3　多個loader的優化143
8.2　縮小打包作用域144
8.2.1　exclude和include144
8.2.2　noParse145
8.2.3　IgnorePlugin146
8.2.4　緩存146
8.3　動態鏈接庫與DllPlugin148
8.3.1　vendor配置149
8.3.2　vendor打包150
8.3.3　鏈接到業務代碼151
8.3.4　潛在問題151
8.4　去除死代碼153
8.4.1　ES6 Module154
8.4.2　使用Webpack進行依賴關係構建154
8.4.3　使用壓縮工具去除死代碼155
8.5　本章小結155
第9章　開發環境調優156
9.1　Webpack開發效率插件156
9.1.1　webpack-dashboard156
9.1.2　webpack-merge158
9.1.3　speed-measure-webpack-plugin161
9.1.4　size-plugin161
9.2　模塊熱替換163
9.2.1　開啟HMR163
9.2.2　HMR原理165
9.2.3　HMR API示例167
9.3　本章小結169
第10章　Webpack打包機制170
10.1　總覽170
10.2　準備工作171
10.3　緩存加載173
10.4　模塊打包176
10.4.1　Compiler176
10.4.2　Compilation178
10.4.3　Resolver179
10.4.4　Module Factory180
10.4.5　Parser181
10.4.6　模板渲染183
10.5　深入Webpack插件184
10.5.1　Tapable185
10.5.2　插件的協同模式187
10.6　本章小結191
第11章　實戰案例192
11.1　React應用192
11.1.1　基礎配置192
11.1.2　JavaScript處理195
11.1.3　TypeScript處理197
11.1.4　樣式處理199
11.1.5　靜態資源201
11.1.6　多頁應用公共代碼優化202
11.1.7　長效緩存205
11.2　Vue應用206
11.2.1　手動搭建Vue項目206
11.2.2　通過@vue/cli搭建項目212
11.3　本章小結214
第12章　更多JavaScript打包工具215
12.1　Rollup215
12.1.1　配置216
12.1.2　Rollup去除死代碼217
12.1.3　可選的輸出格式218
12.1.4　使用Rollup構建JavaScript庫219
12.2　Parcel219
12.2.1　打包速度220
12.2.2　零配置222
12.3　 esbuild224
12.3.1　打包速度224
12.3.2　缺陷225
12.4　Vite225
12.4.1　取長補短225
12.4.2　打包流程優化226
12.5　打包工具的發展趨勢227
12.5.1　性能與通用性227
12.5.2　配置極小化與工程標準化227
12.5.3　WebAssembly228
12.6　本章小結229