這是一本講解如何使用Webpack構(gòu)建現(xiàn)代Web應(yīng)用的著作。第1版豆瓣評(píng)分8.6，好評(píng)率近99.9%，是前端領(lǐng)域的暢銷書，被讀者公認(rèn)為是Webpack領(lǐng)域的標(biāo)準(zhǔn)性著作。
全書圍繞Webpack的功能特性、工作原理、性能優(yōu)化、項(xiàng)目實(shí)戰(zhàn)4個(gè)維度全面展開，從基本的使用場(chǎng)景到復(fù)雜的應(yīng)用實(shí)例，再到系統(tǒng)性的優(yōu)化，由淺入深講解Webpack的各個(gè)特性，同時(shí)剖析其背后的工作原理，讓讀者能零基礎(chǔ)快速掌握Webpack并輕松實(shí)現(xiàn)進(jìn)階。
作者是資深的前端技術(shù)專家，是知名開源打包工具YKit的主導(dǎo)者和核心開發(fā)者，也是Webpack堅(jiān)定不移的布道者。本書內(nèi)容全部來(lái)自作者的實(shí)戰(zhàn)經(jīng)驗(yàn)，盡量避開了網(wǎng)絡(luò)上已經(jīng)發(fā)表的各種公開資料，思路簡(jiǎn)潔、深入，原理與實(shí)操并重。
與第1版相比，第2版做了如下更新：
（1）結(jié)合Webpack新技術(shù)，對(duì)全書內(nèi)容進(jìn)行了全面更新；
（2）收集并分析了讀者對(duì)第1版的反饋，完善了第1版的不足之處；
（3）新增了分析Webpack打包原理的章節(jié)；
（4）新增了2個(gè)關(guān)于React和Vue的綜合案例。
相比第1版，第2版內(nèi)容更新、更全、更深入，實(shí)戰(zhàn)性更強(qiáng)。
（1）作者背景資深：作者是資深前端技術(shù)專家，Webpack技術(shù)布道者，美國(guó)*大免費(fèi)流媒體播放平臺(tái)前端專家，知名開源打包工具YKit主導(dǎo)者和核心開發(fā)者。
（2）4維度全面展開：從功能特性、工作原理、性能優(yōu)化、項(xiàng)目實(shí)戰(zhàn)4個(gè)維度全面展開，提供示例代碼。
（3）第1版廣受好評(píng)：第1版豆瓣評(píng)分8.6，和當(dāng)當(dāng)好評(píng)率近99.9%，是前端領(lǐng)域的暢銷書，被讀者公認(rèn)為是Webpack領(lǐng)域的標(biāo)準(zhǔn)性著作。
曾經(jīng)有一段時(shí)間我負(fù)責(zé)公司內(nèi)部基礎(chǔ)架構(gòu)方面的工作，也因此得以接觸各個(gè)項(xiàng)目組的同事，并經(jīng)常聽(tīng)到他們抱怨：為什么Webpack這么慢？為什么Webpack又出錯(cuò)了？ 發(fā)布到線上的代碼為什么不能正常工作？我切身體會(huì)到，一個(gè)穩(wěn)定、高效的構(gòu)建工具能幫助開發(fā)者大幅提升效率，但很多時(shí)候效率問(wèn)題是無(wú)法通過(guò)簡(jiǎn)單地在網(wǎng)上搜索一下就解決的。盡管Webpack作為構(gòu)建工具已經(jīng)在開發(fā)者社區(qū)中被廣泛使用了很多年，網(wǎng)絡(luò)上也有不少關(guān)于它的資料、教程和文檔，然而想要把它配置好并不是一件容易的事情。
寫本書第1版的初目的就是想通過(guò)盡可能簡(jiǎn)單直白的語(yǔ)言將我對(duì)Webpack的理解和經(jīng)驗(yàn)講出來(lái)。在編寫過(guò)程中，我努力回憶了從次使用Webpack到現(xiàn)在我所遇到的磕磕絆絆，希望能讓讀者少踩些坑。同時(shí)我也結(jié)合了很多個(gè)人對(duì)構(gòu)建工具的思考我們?yōu)槭裁葱枰獦?gòu)建工具、它解決了什么問(wèn)題、它的未來(lái)發(fā)展趨勢(shì)是怎樣的。很多時(shí)候我們只傾向于解決眼前的問(wèn)題，較少思考背后的原因，而當(dāng)我們帶著思考去審視時(shí)，很多問(wèn)題也就迎刃而解了。
本書是第2版，結(jié)合了第1版的讀者反饋，并新增了兩章，分別介紹Webpack的運(yùn)行原理和項(xiàng)目實(shí)戰(zhàn)。另外第2版也對(duì)Webpack新增的特性進(jìn)行了相應(yīng)的補(bǔ)充。
在這里，我要對(duì)機(jī)械工業(yè)出版社楊福川和李藝兩位編輯表示特別的感謝。
【本書內(nèi)容】
本書共12章。第1章是導(dǎo)引，有一定Webpack基礎(chǔ)的讀者可以選擇略過(guò)。第2章梳理了模塊的概念。第3～7章介紹了Webpack的各項(xiàng)基礎(chǔ)特性和使用場(chǎng)景。第8章和第9章則介紹了進(jìn)一步的優(yōu)化方法以及一些高級(jí)的使用方法。第10章介紹了Webpack內(nèi)部的運(yùn)行機(jī)制。第11章介紹了項(xiàng)目實(shí)戰(zhàn)。后第12章介紹了除Webpack之外的打包工具并進(jìn)行了對(duì)比。
【代碼示例】
書中的重要代碼示例整理在GitHub倉(cāng)庫(kù)中，方便讀者在線查看：https://github.com/yuhaoju/webpack-config-handbook。
居玉皓
資深前端開發(fā)工程師，目前就職于美國(guó)在線流媒體平臺(tái)Tubi TV，曾就職于去哪兒網(wǎng)，負(fù)責(zé)前端基礎(chǔ)架構(gòu)的建設(shè)，并主導(dǎo)開發(fā)了知名的開源打包工具YKit。
長(zhǎng)期專注于前端構(gòu)建領(lǐng)域，對(duì)Webpack有深入的研究，積累了豐富的實(shí)踐經(jīng)驗(yàn)，在國(guó)內(nèi)為Webpack的發(fā)展和普及做了較多的努力和貢獻(xiàn)。
前言
第1章 Webpack簡(jiǎn)介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 打包個(gè)應(yīng)用7
1.4.1 Hello World7
1.4.2 使用npm scripts9
1.4.3 使用默認(rèn)目錄配置10
1.4.4 使用配置文件10
1.4.5 webpack-dev-server13
1.5 本章小結(jié)15
第2章 模塊打包17
2.1 CommonJS17
2.1.1 模塊18
2.1.2 導(dǎo)出18
2.1.3 導(dǎo)入20
2.2 ES6 Module22
2.2.1 模塊22
2.2.2 導(dǎo)出23
2.2.3 導(dǎo)入24
2.2.4 復(fù)合寫法26
2.3 CommonJS與ES6 Module的區(qū)別26
2.3.1 動(dòng)態(tài)與靜態(tài)26
2.3.2 值復(fù)制與動(dòng)態(tài)映射27
2.3.3 循環(huán)依賴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 本章小結(jié)41
第3章 資源的輸入和輸出42
3.1 資源處理流程42
3.2 配置資源入口44
3.2.1 context44
3.2.2 entry45
3.2.3 實(shí)例47
3.3 配置資源出口50
3.3.1 filename50
3.3.2 path53
3.3.3 publicPath54
3.3.4 實(shí)例56
3.4 本章小結(jié)57
第4章 預(yù)處理器59
4.1 一切皆模塊59
4.2 loader概述61
4.3 loader的配置63
4.3.1 loader的引入63
4.3.2 鏈?zhǔn)絣oader65
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 本章小結(jié)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 樣式預(yù)處理90
5.2.1 Sass與SCSS90
5.2.2 Less92
5.3 PostCSS93
5.3.1 PostCSS與Webpack93
5.3.2 自動(dòng)前綴94
5.3.3 stylelint95
5.3.4 CSSNext96
5.4 CSS Modules98
5.5 本章小結(jié)99
第6章 代碼分片100
6.1 通過(guò)入口劃分代碼100
6.2 CommonsChunkPlugin101
6.2.1 提取vendor104
6.2.2 設(shè)置提取范圍105
6.2.3 設(shè)置提取規(guī)則106
6.2.4 hash與長(zhǎng)效緩存108
6.2.5 CommonsChunkPlugin的不足110
6.3 optimization.SplitChunks111
6.3.1 從命令式到聲明式113
6.3.2 默認(rèn)的異步提取114
6.3.3 配置115
6.4 資源異步加載116
6.4.1 import()116
6.4.2 異步chunk的配置119
6.5 本章小結(jié)120
第7章 生產(chǎn)環(huán)境配置121
7.1 環(huán)境配置的封裝121
7.2 開啟production模式123
7.3 環(huán)境變量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 輸出動(dòng)態(tài)HTML133
7.6.3 使chunk id更穩(wěn)定135
7.7 bundle體積監(jiān)控和分析137
7.8 本章小結(jié)139
第8章 打包優(yōu)化140
8.1 HappyPack140
8.1.1 工作原理141
8.1.2 單個(gè)loader的優(yōu)化141
8.1.3 多個(gè)loader的優(yōu)化143
8.2 縮小打包作用域144
8.2.1 exclude和include144
8.2.2 noParse145
8.2.3 IgnorePlugin146
8.2.4 緩存146
8.3 動(dòng)態(tài)鏈接庫(kù)與DllPlugin148
8.3.1 vendor配置149
8.3.2 vendor打包150
8.3.3 鏈接到業(yè)務(wù)代碼151
8.3.4 潛在問(wèn)題151
8.4 去除死代碼153
8.4.1 ES6 Module154
8.4.2 使用Webpack進(jìn)行依賴關(guān)系構(gòu)建154
8.4.3 使用壓縮工具去除死代碼155
8.5 本章小結(jié)155
第9章 開發(fā)環(huán)境調(diào)優(yōu)156
9.1 Webpack開發(fā)效率插件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 本章小結(jié)169
第10章 Webpack打包機(jī)制170
10.1 總覽170
10.2 準(zhǔn)備工作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 插件的協(xié)同模式187
10.6 本章小結(jié)191
第11章 實(shí)戰(zhàn)案例192
11.1 React應(yīng)用192
11.1.1 基礎(chǔ)配置192
11.1.2 JavaScript處理195
11.1.3 TypeScript處理197
11.1.4 樣式處理199
11.1.5 靜態(tài)資源201
11.1.6 多頁(yè)應(yīng)用公共代碼優(yōu)化202
11.1.7 長(zhǎng)效緩存205
11.2 Vue應(yīng)用206
11.2.1 手動(dòng)搭建Vue項(xiàng)目206
11.2.2 通過(guò)@vue/cli搭建項(xiàng)目212
11.3 本章小結(jié)214
第12章 更多JavaScript打包工具215
12.1 Rollup215
12.1.1 配置216
12.1.2 Rollup去除死代碼217
12.1.3 可選的輸出格式218
12.1.4 使用Rollup構(gòu)建JavaScript庫(kù)219
12.2 Parcel219
12.2.1 打包速度220
12.2.2 零配置222
12.3 esbuild224
12.3.1 打包速度2
書單推薦
