作 者:姜瑞濤 著
定 價:89
出 版 社:電子工業出版社
出版日期:2022年01月01日
頁 數:284
裝 幀:平裝
ISBN:9787121424724
"1.業內專家新加坡StarVision區域項目經理Peter Xu和學而思網校原1對1前端負責人汪心旺聯袂力薦。2.本書適用於Webpack v5.0.0和Babel v7.0.0之後的版本,是針對零基礎前端開發者講解Webpack與Babel使用方法的圖書。3.本書對構建靈活的前端工程化架構,提升定制化的能力很有幫助。"
●第1章Webpack入門
1.1Webpack簡介
1.2安裝Webpack
1.2.1安裝Node.js
1.2.2安裝Webpack
1.2.3全局安裝與本地安裝Webpack的區別
1.3Webpack快速入門
1.3.1Webpack的命令行打包
1.3.2Webpack打包模式mode
1.3.3Webpack的配置文件
1.4Webpack預處理器
1.4.1引入CSS文件
1.4.2Webpack預處理器的使用
1.5本章小結
第2章Webpack資源入口與出口
2.1模塊化
2.1.1JS模塊化歷史
2.1.2ES6Module
2.1.3CommonJS
2.2Webpack資源入口
2.2.1Webpack基礎目錄context
2.2.2Webpack資源入口entry
2.3Webpack資源出口
2.3.1Webpack的output.filename
2.3.2Webpack的output.path
2.3.3Webpack的output.publicPath
2.3.4output.publicPath與資源訪問路徑
2.3.5Webpack的output.chunkFilename
2.4hash、fullhash、chunkhash和contenthash的區別
2.4.1瀏覽器緩存
2.4.2Webpack與hash算法
2.4.3Webpack中hash、fullhash、chunkhash和contenthash的區別
2.5本章小結
第3章Webpack預處理器
3.1預處理器的配置與使用
3.1.1預處理器的關鍵配置項
3.1.2exclude和include
3.1.3其他預處理器寫法
3.2Babel預處理器babel-loader
3.2.1引入問題
3.2.2直接使用Webpack
3.2.3使用babel-loader
3.3文件資源預處理器file-loader
3.3.1file-loader處理JS引入的圖片
3.3.2file-loader處理CSS引入的圖片
3.3.3file-loader的其他知識
3.4增強版文件資源預處理器url-loader
3.4.1url-loader的Base64編碼
3.4.2file-loader與url-loader處理後的資源名稱
3.4.3file-loader與url-loader處理後的資源路徑
3.5本章小結
第4章Webpack插件
4.1插件簡介
4.2清除文件插件clean-webpack-plugin
4.2.1clean-webpack-plugin簡介
4.2.2安裝clean-webpack-plugin
4.2.3使用clean-webpack-plugin
4.3復制文件插件copy-webpack-plugin
4.3.1copy-webpack-plugin簡介
4.3.2安裝copy-webpack-plugin
4.3.3使用copy-webpack-plugin
4.4HTML模板插件html-webpack-plugin
4.4.1html-webpack-plugin簡介
4.4.2安裝html-webpack-plugin
4.4.3使用html-webpack-plugin
4.4.4html-webpack-plugin的自定義參數
4.5本章小結
第5章Webpack開發環境配置
5.1文件監聽與webpack-dev-server
5.1.1文件監聽模式
5.1.2webpack-dev-server的安裝與啟動
5.1.3webpack-dev-server的常用參數
5.2模塊熱替換
5.3Webpack中的sourcemap
5.3.1sourcemap簡介
5.3.2sourcemap的配置項devtool
5.3.3開發環境與生產環境sourcemap配置
5.4AssetModules
5.4.1AssetModules簡介
5.4.2自定義文件名稱
5.4.3資源類型為asset/inline
5.4.4資源類型為asset
5.5本章小結
第6章Webpack生產環境配置
6.1環境變量
6.1.1Node.js環境裡的環境變量
6.1.2Webpack打包模塊裡的環境變量
6.2樣式處理
6.2.1樣式文件的提取
6.2.2Sass處理
6.2.3 tCSS
6.3合並配置webpack-merge
6.4性能提示
6.5本章小結
第7章Webpack性能優化
7.1打包體積分析工具webpack-bundle-analyzer
7.1.1安裝
7.1.2使用
7.2打包速度分析工具speed-measure-webpack-plugin
7.2.1安裝與配置
7.2.2預處理器與插件的時間分析
7.3資源壓縮
7.3.1壓縮JS文件
7.3.2壓縮CSS文件
7.4縮小查找範圍
7.4.1配置預處理器的exclude與include
7.4.2module.noParse
7.4.3resolve.modules
7.4.4resolve.extensions
7.5代碼分割optimization.splitChunks
7.5.1代碼分割
7.5.2splitChunks
7.5.3splitChunks示例講解
7.6搖樹優化TreeShaking
7.6.1使用TreeShaking的原因
7.6.2使用TreeShaking
7.6.3生產環境的優化配置
7.6.4Webpack5中對TreeShaking的改進
7.7使用緩存
7.7.1Webpack中的緩存
7.7.2文件繫統緩存的使用
7.8本章小結
第8章Webpack原理與拓展
8.1Webpack構建原理
8.1.1Webpack打包文件分析
8.1.2tapable
8.1.3Webpack打包流程與源碼初探
8.2Webpack預處理器開發
8.2.1基礎預處理器開發
8.2.2鏈式預處理器開發
8.2.3自定義預處理器傳參
8.3Webpack插件開發
……
這是一本針對零基礎前端開發者講解Webpack與Babel使用方法的圖書。隨著前端工程的不斷發展,Webpack與Babel已成為前端開發的兩大核心工具。目前,Webpack是前端開發的主流構建工具,Babel是轉譯ES6代碼的通用解決方案。本書由兩大部分構成,第一部分介紹Webpack,第二部分介紹Babel。Webpack部分講解了Webpack的安裝、資源入口與出口、預處理器與插件的配置、開發環境與生產環境的配置、性能優化及構建原理等。Babel部分講解了Babel入門知識、Babel的配置文件、預設與插件的選擇、babel-polyfill的使用方法,以及@babel/preset-env和@babel/plugin-transform-runtime這兩個核心配置項的使用方法,這一部分還會講解Babel的原理及Babel插件的開發。最後,在附錄中介紹了ModuleFederati等
姜瑞濤 著
"姜瑞濤畢業於華北電力大學,五年前端開發經驗。曾在好未來、用友擔任高級前端開發工程師,參與過用友NC Cloud大型企業數字化平臺和學而思網校1對1管理後臺的開發。擅長工程化解決前端兼容性問題,在Babel的使用上有豐富經驗。"