Webpack實(shí)戰(zhàn)：入門、進(jìn)階與調(diào)優(yōu) 第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　打包個(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　通過入口劃分代碼100
6.2　CommonsChunkPlugin101
6.2.1　提取vendor104
6.2.2　設(shè)置提取范圍105
6.2.3　設(shè)置提取規(guī)則106
6.2.4　hash與長效緩存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)鏈接庫與DllPlugin148
8.3.1　vendor配置149
8.3.2　vendor打包150
8.3.3　鏈接到業(yè)務(wù)代碼151
8.3.4　潛在問題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īng)用公共代碼優(yōu)化202
11.1.7　長效緩存205
11.2　Vue應(yīng)用206
11.2.1　手動(dòng)搭建Vue項(xiàng)目206
11.2.2　通過@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庫219
12.2　Parcel219
12.2.1　打包速度220
12.2.2　零配置222
12.3　 esbuild224
12.3.1　打包速度2