Webpack實戰(zhàn):入門、進階與調(diào)優(yōu) 第2版
定 價:99 元
叢書名:Web開發(fā)技術叢書
這是一本講解如何使用Webpack構建現(xiàn)代Web應用的著作。第1版豆瓣評分8.6,好評率近99.9%,是前端領域的暢銷書,被讀者公認為是Webpack領域的標準性著作。
全書圍繞Webpack的功能特性、工作原理、性能優(yōu)化、項目實戰(zhàn)4個維度全面展開,從基本的使用場景到復雜的應用實例,再到系統(tǒng)性的優(yōu)化,由淺入深講解Webpack的各個特性,同時剖析其背后的工作原理,讓讀者能零基礎快速掌握Webpack并輕松實現(xiàn)進階。
作者是資深的前端技術專家,是知名開源打包工具YKit的主導者和核心開發(fā)者,也是Webpack堅定不移的布道者。本書內(nèi)容全部來自作者的實戰(zhàn)經(jīng)驗,盡量避開了網(wǎng)絡上已經(jīng)發(fā)表的各種公開資料,思路簡潔、深入,原理與實操并重。
與第1版相比,第2版做了如下更新:(1)結合Webpack新技術,對全書內(nèi)容進行了全面更新;(2)收集并分析了讀者對第1版的反饋,完善了第1版的不足之處;(3)新增了分析Webpack打包原理的章節(jié);(4)新增了2個關于React和Vue的綜合案例。相比第1版,第2版內(nèi)容更新、更全、更深入,實戰(zhàn)性更強。
(1)作者背景資深:作者是資深前端技術專家,Webpack技術布道者,美國*大免費流媒體播放平臺前端專家,知名開源打包工具YKit主導者和核心開發(fā)者。(2)4維度全面展開:從功能特性、工作原理、性能優(yōu)化、項目實戰(zhàn)4個維度全面展開,提供示例代碼。(3)第1版廣受好評:第1版豆瓣評分8.6,和當當好評率近99.9%,是前端領域的暢銷書,被讀者公認為是Webpack領域的標準性著作。
曾經(jīng)有一段時間我負責公司內(nèi)部基礎架構方面的工作,也因此得以接觸各個項目組的同事,并經(jīng)常聽到他們抱怨:為什么Webpack這么慢?為什么Webpack又出錯了? 發(fā)布到線上的代碼為什么不能正常工作?我切身體會到,一個穩(wěn)定、高效的構建工具能幫助開發(fā)者大幅提升效率,但很多時候效率問題是無法通過簡單地在網(wǎng)上搜索一下就解決的。盡管Webpack作為構建工具已經(jīng)在開發(fā)者社區(qū)中被廣泛使用了很多年,網(wǎng)絡上也有不少關于它的資料、教程和文檔,然而想要把它配置好并不是一件容易的事情。
寫本書第1版的初目的就是想通過盡可能簡單直白的語言將我對Webpack的理解和經(jīng)驗講出來。在編寫過程中,我努力回憶了從次使用Webpack到現(xiàn)在我所遇到的磕磕絆絆,希望能讓讀者少踩些坑。同時我也結合了很多個人對構建工具的思考我們?yōu)槭裁葱枰獦嫿üぞ摺⑺鉀Q了什么問題、它的未來發(fā)展趨勢是怎樣的。很多時候我們只傾向于解決眼前的問題,較少思考背后的原因,而當我們帶著思考去審視時,很多問題也就迎刃而解了。
本書是第2版,結合了第1版的讀者反饋,并新增了兩章,分別介紹Webpack的運行原理和項目實戰(zhàn)。另外第2版也對Webpack新增的特性進行了相應的補充。
在這里,我要對機械工業(yè)出版社楊福川和李藝兩位編輯表示特別的感謝。
【本書內(nèi)容】
本書共12章。第1章是導引,有一定Webpack基礎的讀者可以選擇略過。第2章梳理了模塊的概念。第3~7章介紹了Webpack的各項基礎特性和使用場景。第8章和第9章則介紹了進一步的優(yōu)化方法以及一些高級的使用方法。第10章介紹了Webpack內(nèi)部的運行機制。第11章介紹了項目實戰(zhàn)。后第12章介紹了除Webpack之外的打包工具并進行了對比。
【代碼示例】
書中的重要代碼示例整理在GitHub倉庫中,方便讀者在線查看:https://github.com/yuhaoju/webpack-config-handbook。
居玉皓資深前端開發(fā)工程師,目前就職于美國在線流媒體平臺Tubi TV,曾就職于去哪兒網(wǎng),負責前端基礎架構的建設,并主導開發(fā)了知名的開源打包工具YKit。長期專注于前端構建領域,對Webpack有深入的研究,積累了豐富的實踐經(jīng)驗,在國內(nèi)為Webpack的發(fā)展和普及做了較多的努力和貢獻。
前言第1章 Webpack簡介11.1 何為Webpack11.2 為什么需要Webpack21.2.1 何為模塊21.2.2 JavaScript中的模塊31.2.3 模塊打包工具41.2.4 為什么選擇Webpack51.3 安裝51.4 打包個應用71.4.1 Hello World71.4.2 使用npm scripts91.4.3 使用默認目錄配置101.4.4 使用配置文件101.4.5 webpack-dev-server131.5 本章小結15第2章 模塊打包172.1 CommonJS172.1.1 模塊182.1.2 導出182.1.3 導入202.2 ES6 Module222.2.1 模塊222.2.2 導出232.2.3 導入242.2.4 復合寫法262.3 CommonJS與ES6 Module的區(qū)別262.3.1 動態(tài)與靜態(tài)262.3.2 值復制與動態(tài)映射272.3.3 循環(huán)依賴292.4 加載其他類型的模塊332.4.1 非模塊化文件342.4.2 AMD342.4.3 UMD352.4.4 加載npm模塊372.5 模塊打包原理382.6 本章小結41第3章 資源的輸入和輸出423.1 資源處理流程423.2 配置資源入口443.2.1 context443.2.2 entry453.2.3 實例473.3 配置資源出口503.3.1 filename503.3.2 path533.3.3 publicPath543.3.4 實例563.4 本章小結57第4章 預處理器594.1 一切皆模塊594.2 loader概述614.3 loader的配置634.3.1 loader的引入634.3.2 鏈式loader654.3.3 loader options654.3.4 更多配置664.4 常用loader介紹704.4.1 babel-loader704.4.2 ts-loader724.4.3 html-loader734.4.4 handlebars-loader734.4.5 file-loader744.4.6 url-loader774.5 自定義loader784.6 本章小結82第5章 樣式處理835.1 分離樣式文件835.1.1 extract-text-webpack-plugin845.1.2 多樣式文件的處理865.1.3 mini-css-extract-plugin885.2 樣式預處理905.2.1 Sass與SCSS905.2.2 Less925.3 PostCSS935.3.1 PostCSS與Webpack935.3.2 自動前綴945.3.3 stylelint955.3.4 CSSNext965.4 CSS Modules985.5 本章小結99第6章 代碼分片1006.1 通過入口劃分代碼1006.2 CommonsChunkPlugin1016.2.1 提取vendor1046.2.2 設置提取范圍1056.2.3 設置提取規(guī)則1066.2.4 hash與長效緩存1086.2.5 CommonsChunkPlugin的不足1106.3 optimization.SplitChunks1116.3.1 從命令式到聲明式1136.3.2 默認的異步提取1146.3.3 配置1156.4 資源異步加載1166.4.1 import()1166.4.2 異步chunk的配置1196.5 本章小結120第7章 生產(chǎn)環(huán)境配置1217.1 環(huán)境配置的封裝1217.2 開啟production模式1237.3 環(huán)境變量1247.4 source-map1257.4.1 source-map原理1257.4.2 source-map配置1267.4.3 source-map安全1287.5 資源壓縮1297.5.1 壓縮JavaScript1297.5.2 壓縮CSS1317.6 緩存1327.6.1 資源hash1327.6.2 輸出動態(tài)HTML1337.6.3 使chunk id更穩(wěn)定1357.7 bundle體積監(jiān)控和分析1377.8 本章小結139第8章 打包優(yōu)化1408.1 HappyPack1408.1.1 工作原理1418.1.2 單個loader的優(yōu)化1418.1.3 多個loader的優(yōu)化1438.2 縮小打包作用域1448.2.1 exclude和include1448.2.2 noParse1458.2.3 IgnorePlugin1468.2.4 緩存1468.3 動態(tài)鏈接庫與DllPlugin1488.3.1 vendor配置1498.3.2 vendor打包1508.3.3 鏈接到業(yè)務代碼1518.3.4 潛在問題1518.4 去除死代碼1538.4.1 ES6 Module1548.4.2 使用Webpack進行依賴關系構建1548.4.3 使用壓縮工具去除死代碼1558.5 本章小結155第9章 開發(fā)環(huán)境調(diào)優(yōu)1569.1 Webpack開發(fā)效率插件1569.1.1 webpack-dashboard1569.1.2 webpack-merge1589.1.3 speed-measure-webpack-plugin1619.1.4 size-plugin1619.2 模塊熱替換1639.2.1 開啟HMR1639.2.2 HMR原理1659.2.3 HMR API示例1679.3 本章小結169第10章 Webpack打包機制17010.1 總覽17010.2 準備工作17110.3 緩存加載17310.4 模塊打包17610.4.1 Compiler17610.4.2 Compilation17810.4.3 Resolver17910.4.4 Module Factory18010.4.5 Parser18110.4.6 模板渲染18310.5 深入Webpack插件18410.5.1 Tapable18510.5.2 插件的協(xié)同模式18710.6 本章小結191第11章 實戰(zhàn)案例19211.1 React應用19211.1.1 基礎配置19211.1.2 JavaScript處理19511.1.3 TypeScript處理19711.1.4 樣式處理19911.1.5 靜態(tài)資源20111.1.6 多頁應用公共代碼優(yōu)化20211.1.7 長效緩存20511.2 Vue應用20611.2.1 手動搭建Vue項目20611.2.2 通過@vue/cli搭建項目21211.3 本章小結214第12章 更多JavaScript打包工具21512.1 Rollup21512.1.1 配置21612.1.2 Rollup去除死代碼21712.1.3 可選的輸出格式21812.1.4 使用Rollup構建JavaScript庫21912.2 Parcel21912.2.1 打包速度22012.2.2 零配置22212.3 esbuild22412.3.1 打包速度2