這是一本能指導讀者零基礎(chǔ)快速掌握Webpack并輕松進階的實戰(zhàn)性著作。
作者是資深的前端工程師，在Webpack領(lǐng)域有深厚的積累，是知名開源打包工具YKit的主導者和核心開發(fā)者。本書從功能特性、工作原理、應(yīng)用實踐、性能優(yōu)化4個維度對Webpack進行了全面的講解，內(nèi)容上盡力避免了網(wǎng)絡(luò)上已經(jīng)公開發(fā)表的各種資料和文檔，而是從作者的實際經(jīng)驗出發(fā)，將更有價值的內(nèi)容呈現(xiàn)給讀者，盡量幫助讀者少走彎路。
全書一共10章：
第1章是一個快速的指引，介紹了Webpack的概念、適用場景、開發(fā)環(huán)境搭建，以及如何快速上手。
第2~7章詳細講解了Webpack的各項功能特性及其工作原理，同時講解了它們的適用場景，以及如何付諸實踐。
第8~9章深入總結(jié)了打包的性能優(yōu)化和開發(fā)環(huán)境的優(yōu)化。
第10章介紹了其他打包工具并對這些工具進行了各項特性的對比。
（1）作者是資深的前端工程師，現(xiàn)就職于美國某互聯(lián)網(wǎng)企業(yè)，曾就職于去哪兒，負責前端基礎(chǔ)架構(gòu)的建設(shè)。
（2）作者是資深的Webpack技術(shù)專家，是知名打包工具YKit的主導者和核心開發(fā)者，積累了豐富的實踐經(jīng)驗，是Webpack的布道者。
（3）本書從功能特性、工作原理、應(yīng)用實踐、性能優(yōu)化4個維度對Webpack進行了全面的講解，系統(tǒng)性、深度、實戰(zhàn)性兼具。
◆前言◆
前 言 Preface
本書是我從2017年冬天開始動筆的。在寫作本書之前的一段時間，我一直負責與前端項目構(gòu)建相關(guān)的工作，也曾做過一系列Webpack在線課程，但是當接到寫一本關(guān)于Webpack的書的提議時，我著實猶豫了很久。最大的擔憂在于Webpack本身已經(jīng)有詳盡的文檔，社區(qū)中也有無數(shù)關(guān)于它的博客文章，自己如何能找到一個新的角度，讓讀者有所受益。
于是我開始回想自己最初學習Webpack時的經(jīng)歷在了解它的過程中遇到哪些曲折，使用時碰到了哪些問題，有哪些點是我覺得如果當初我早就知道就好了的。通過回憶這些曾遇到過的磕磕絆絆，我逐漸找到了寫作本書的出發(fā)點用我的語言盡可能簡單、直白地介紹Webpack，讓從來沒有接觸過Webpack的開發(fā)者也可以比較容易上手；同時把我所趟過的一些坑寫出來，讓讀到的人少走一些彎路。
有時能聽到一種戲稱Webpack 配置工程師，從這里面大概能體會到Webpack的使用并不簡單。而這本書的作用之一大概就是把里面比較晦澀的部分解釋清楚，讓大家了解Webpack是怎么工作的，它其實并不神秘。
本書內(nèi)容
本書共10章。第1章是一個導引，對Webpack有一定基礎(chǔ)的讀者可以選擇略過。第2章從頭梳理了模塊的概念。第3章至第7章介紹了Webpack的各項特性以及基本的使用場景。第8章和第9章則是進一步的優(yōu)化以及一些高級的使用方法 。最后第10章介紹了其他打包工具并對這些工具進行了各項特性的對比。
代碼示例
書中有很多代碼片段，為了在線運行方便，我在GitHub上整理了一個示例倉庫，如果需要，可以到https://github.com/yuhaoju/webpack-config-handbook進行查看。
致謝
我要特別感謝我的朋友們
。寫書是一個漫長而孤獨的過程，在此期間我得到了很多鼓勵和督促。有些時候朋友還要擔當我的校對者，即便對書中的內(nèi)容不了解也會幫忙查看其中的錯誤 ，并提出閱讀體驗方面的建議，對我整本書的寫作有很大的幫助。
同時要感謝楊福川和李藝兩位編輯，在前期規(guī)劃以及寫作本書的過程中給予我不少指導，沒有他們就不可能有這本書的順利完成。
最后，感謝閱讀本書的你，希望你能喜歡。
居玉皓
資深前端開發(fā)工程師，目前就職于美國在線流媒體平臺Tubi TV，曾就職于去哪兒網(wǎng)，負責前端基礎(chǔ)架構(gòu)的建設(shè)，并主導開發(fā)了知名的開源打包工具YKit。
長期專注于前端構(gòu)建領(lǐng)域，對Webpack有深入的研究，積累了豐富的實踐經(jīng)驗，在國內(nèi)為Webpack的發(fā)展和普及做了較多的努力和貢獻。
Contents 目 錄
前言
第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 打包第一個應(yīng)用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 本章小結(jié)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的區(qū)別26
2.3.1 動態(tài)與靜態(tài)26
2.3.2 值拷貝與動態(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 實例47
3.3 配置資源出口50
3.3.1 filename50
3.3.2 path53
3.3.3 publicPath54
3.3.4 實例56
3.4 本章小結(jié)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-loader76
4.4.7 vue-loader77
4.5 自定義loader78
4.6 本章小結(jié)82
第5章 樣式處理84
5.1 分離樣式文件84
5.1.1 extract-text-webpack-plugin85
5.1.2 多樣式文件的處理87
5.1.3 mini-css-extract-plugin89
5.2 樣式預處理91
5.2.1 Sass與SCSS91
5.2.2 Less93
5.3 PostCSS94
5.3.1 PostCSS與Webpack94
5.3.2 自動前綴95
5.3.3 stylelint96
5.3.4 CSSNext98
5.4 CSS Modules99
5.5 本章小結(jié)100
第6章 代碼分片101
6.1 通過入口劃分代碼101
6.2 CommonsChunkPlugin102
6.2.1 提取vendor105
6.2.2 設(shè)置提取范圍106
6.2.3 設(shè)置提取規(guī)則107
6.2.4 hash與長效緩存109
6.2.5 CommonsChunkPlugin的不足111
6.3 optimization.SplitChunks112
6.3.1 從命令式到聲明式114
6.3.2 默認的異步提取115
6.3.3 配置116
6.4 資源異步加載117
6.4.1 import()118
6.4.2 異步chunk的配置120
6.5 本章小結(jié)121
第7章 生產(chǎn)環(huán)境配置122
7.1 環(huán)境配置的封裝122
7.2 開啟production模式124
7.3 環(huán)境變量125
7.4 source map126
7.4.1 原理126
7.4.2 source map配置127
7.4.3 安全129
7.5 資源壓縮130
7.5.1 壓縮JavaScript130
7.5.2 壓縮CSS132
7.6 緩存133
7.6.1 資源hash133
7.6.2 輸出動態(tài)HTML134
7.6.3 使chunk id更穩(wěn)定136
7.7 bundle體積監(jiān)控和分析138
7.8 本章小結(jié)140
第8章 打包優(yōu)化141
8.1 HappyPack141
8.1.1 工作原理142
8.1.2 單個loader的優(yōu)化142
8.1.3 多個loader的優(yōu)化144
8.2 縮小打包作用域145
8.2.1 exclude和include145
8.2.2 noParse146
8.2.3 IgnorePlugin146
8.2.4 Cache147
8.3 動態(tài)鏈接庫與DllPlugin147
8.3.1 vendor配置148
8.3.2 vendor打包149
8.3.3 鏈接到業(yè)務(wù)代碼150
8.3.4 潛在問題151
8.4 tree shaking152
8.4.1 ES6 Module153
8.4.2 使用Webpack進行依賴關(guān)系構(gòu)建153
8.4.3 使用壓縮工具去除死代碼154
8.5 本章小結(jié)154
第9章 開發(fā)環(huán)境調(diào)優(yōu)155
9.1 Webpack開發(fā)效率插件155
9.1.1 webpack-dashboard155
9.1.2 webpack-merge157
9.1.3 speed-measure-webpack-plugin160
9.1.4 size-plugin160
9.2 模塊熱替換162
9.2.1 開啟HMR162
9.2.2 HMR原理164
9.2.3 HMR API示例166
9.3 本章小結(jié)168
第10章 更多JavaScript打包工具169
10.1 Rollup169
10.1.1 配置170
10.1.2 tree shaking171
10.1.3 可選的輸出格式172
10.1.4 使用Rollup構(gòu)建JavaScript庫173
10.2 Parcel173
10.2.1 打包速度174
10.2.2 零配置176
10.3 打包工具的發(fā)展趨勢178
10.3.1 性能與通用性178
10.3.2 配置極小化與工程標準化178
10.3.3 WebAssembly179
10.4 本章小結(jié)180
書單推薦
