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