深入淺出 Webpack 深入浅出Webpack

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

第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