配送方式
-
台灣
- 國內宅配：本島、離島
-
到店取貨：
不限金額免運費
-
海外
- 國際快遞：全球
-
港澳店取：
內容簡介
零基礎前端開發新手也能輕鬆上手的前端 Pre-process 自動化編譯！
許多初學者剛開始學習前端開發時，面臨搜尋引擎中紊亂無條理的前端框架教學資料，仍搞不清楚到底要學什麼；即使寫好所有 Pre-process，卻沒有一個前端自動化工具編譯這些 Pre-process。
Webpack 與 Babel 為現代前端工程領域最核心的兩大工具，就是自動化編譯的救星！本書系統性的撰寫風格就是引導你入門 Webpack 與 Babel 的指南針，讓你成為一位概念清晰又操作泰然的開發者。
【Webpack＋Babel 兩大核心工具完全攻略！】
本書精選 Webpack 以及 Babel 兩大主題編排而成，Webpack 部分為前 8 章，Babel 部分則為後 4 章，兩部分之區分相輔相成，讓讀者更方便參考，知悉兩大核心工具的精髓。
◎[Webpack] → CSS 引入／ES6 模組／CommonJS／資源出入口實作／最常用外掛程式開發／前置處理器 file-loader 及 url-loader 配置與使用／環境設定／模組熱替換／性能最佳化
◎[Babel] → 安裝設定及轉碼／外掛程式的選擇／babel-polyfill 的使用／@babel/preset-env 的使用／@babel/plugin-transform-runtime 的使用／最常用工具應用全集／入門原理介紹
◎本書程式實作適用於 Webpack v5.0.0 與 Babel v7.0.0 後版本
本書特色
JavaScript Developer 必備的工具書！
★ 自己學或產業開發都派得上用場
自學者或 IT 產業人士無需再感到孤單，本書實用性極高，從【入門概念到開發應用】一次打包給你，是十分值得入手的 JS 工具用書選擇。
★ 系統性整理的撰寫風格
本書主要用【系統性的整理手法】來梳理 JS 新手使用 Webpack 與 Babel 較不容易理解的概念，讓新手讀者輕鬆上手。
★ 範例程式 Bonus！
本書搭配完整的 code 於深智官網，【免費下載】，方便讀者跟著每個章節步驟實作時更容易掌握 JS 所具備的細節，找到自己的開發價值。
目錄
▎Ch01 Webpack 入門
1.1 Webpack 簡介
1.2 安裝 Webpack 5
1.3 Webpack 快速入門
1.4 Webpack 前置處理器
1.5 本章小結
▎Ch02 Webpack 資源入口與出口
2.1 模組化
2.2 Webpack 資源入口
2.3 Webpack 資源出口
2.4 hash、fullhash、chunkhash 和 contenthash 的區別
2.5 本章小結
▎Ch03 Webpack 前置處理器
3.1 前置處理器的設定與使用
3.2 Babel 前置處理器 babel-loader
3.3 檔案資源前置處理器 file-loader
3.4 增強版檔案資源前置處理器 url-loader
3.5 本章小結
▎Ch04 Webpack 外掛程式
4.1 外掛程式簡介
4.2 清除檔案外掛程式 clean-webpack-plugin
4.3 複製檔案外掛程式 copy-webpack-plugin
4.4 HTML 範本外掛程式 html-webpack-plugin
4.5 本章小結
▎Ch05 Webpack 開發環境設定
5.1 檔案監聽與 webpack-dev-server
5.2 模組熱替換
5.3 Webpack 中的 source map
5.4 Asset Modules
5.5 本章小結
▎Ch06 Webpack 生產環境設定
6.1 環境變數
6.2 樣式處理
6.3 合併設定 webpack-merge
6.4 性能提示
6.5 本章小結
▎Ch07 Webpack 性能最佳化
7.1 打包體積分析工具 webpack-bundle-analyzer
7.2 打包速度分析工具 speed-measure-webpack-plugin
7.3 資源壓縮
7.4 縮小尋找範圍
7.5 程式分割 optimization.splitChunks
7.6 搖樹最佳化 Tree Shaking
7.7 使用快取
7.8 本章小結
▎Ch08 Webpack 原理與拓展
8.1 Webpack 建構原理
8.2 Webpack 前置處理器開發
8.3 Webpack 外掛程式開發
8.4 本章小結
▎Ch09 Babel 入門
9.1 Babel 簡介
9.2 Babel 快速入門
9.3 引入 polyfill
9.4 本章小結
▎Ch10 深入 Babel
10.1 Babel 版本
10.2 Babel 設定檔
10.3 預設與外掛程式的選擇
10.4 babel-polyfill
10.5 @babel/preset-env
10.6 @babel/plugin-transform-runtime
10.7 本章小結
▎Ch11 Babel 工具
11.1 @babel/core
11.2 @babel/cli
11.3 @babel/node
11.4 本章小結
▎Ch12 Babel 原理與 Babel 外掛程式開發
12.1 Babel 原理
12.2 Babel 外掛程式開發
12.3 本章小結
▎附錄 A Module Federation 與微前端
▎附錄 B Babel 8 前瞻
序／導讀
序
Webpack 和 Babel 是前端工程領域最核心的兩大工具。我回想起，自己最初從事前端開發工作的時候，面對著技術論壇雜亂的 Webpack 和 Babel 資料，在很長一段時間內都感到迷惑與不解。
做前端開發工作的第一年，我被 Babel 的那堆 babel-preset-es2015、babel-preset-es2016、babel-preset-stage-0、babel-preset-stage-1、@babel/preset-env 和 @babel/plugin-transform-runtime 設定項目搞得暈頭轉向，經常問自己到底該用哪些設定項目，到底該怎麼設定。
我處於這種混亂的狀態整整一年之後，才漸漸對 Babel 有所認知，但是這種認知也很不全面。我從 Babel 6 到 Babel 7 學到的大量知識都是錯誤的和即將被淘汰的。這些零散的、錯誤的知識碎片增加了初學者的學習難度。
對於 Webpack，我差不多也曾處於一樣的狀態。在 2016 年年底，我第一次接觸到 Webpack，當時公司項目用的建構工具還不是 Webpack，而技術論壇內已經漸漸開始流行使用 Webpack 建構前端工程了。當時沒有完整的 Webpack 資料，官方檔案也不容易了解。於是我找了一些文章，嘗試學習，不過沒有學明白。這是因為 Webpack 是基於 Node.js 的，而我當時不會 Node.js，於是我又開始學習 Node.js。
幾年時間過去了，我對 Webpack 越來越熟悉。這中間走了很多彎路，舉例來說，為了掌握 Webpack 的正常設定而深入學習 Node.js，其實只需要會用幾個 Node.js 的模組函數就可以了，等等。
我覺得前端工程領域需要一本對新人友善的 Webpack 與 Babel 圖書，於是我將自己的技術網誌文章整理成了本書。我在本書中對網誌文章中的 Webpack 部分進行版本升級，本書使用的是 Webpack 5 版本，針對 Babel 部分還增加了原理和外掛程式開發的內容。本書是一本全方位地給初學者講解 Webpack 和 Babel 的圖書，希望可以幫助讀者成為更優秀的 JavaScript 開發者。
本書主要由 Webpack 和 Babel 兩大部分組成，Webpack 部分是第 1 章到第 8 章，Babel 部分是第 9 章到第 12 章。這兩部分內容相對獨立，讀者可以選擇自己感興趣的部分閱讀。
本書中主要使用的 Webpack 版本是 v5.21.2，但對 v5.0.0 之後的版本都適用；主要使用的 Babel 版本是 v7.13.10，但對 v7.0.0 之後的版本都適用，而且還對 Babel 版本的變化列出了詳細的說明。建議讀者安裝與書中版本一致的工具軟體，這樣可以減少 npm 套件版本帶來的差異。
本書使用的某些 npm 套件在未來可能因依賴升級而發生錯誤，這時可以透過將 x.y.z 版本編號中的 y 升級到最新版本來嘗試修正該錯誤。另外，因為 Webpack 生成 hash 值的演算法比較特殊，所以讀者在自己電腦上執行程式時生成的帶 hash 值的檔案名稱可能與書中不一樣。讀者在查看某些運行結果時，需要手動更改打包編譯後的檔案名稱。
在閱讀本書時，如果遇到有問題或錯誤的地方，可以在本書的 GitHub 程式倉庫 github.com/jruit/webpack-babel 上透過 Issue 回饋給我。
感謝關注我技術網誌（見連結16）的讀者們，你們的支持和讚譽給了我寫作本書的動力。
感謝張東東和孟津，你們在我還是一個新人時就給予了我很多幫助，一直激勵著我深入前端開發的學習。
最後，感謝付睿編輯，你在我寫作本書的過程中給予了我不少幫助，沒有你的耐心指導就沒有本書的出版。
姜瑞濤
訂購/退換貨須知
加入金石堂 LINE 官方帳號『完成綁定』，隨時掌握出貨動態：
提醒您！！
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機，請不要聽從指示，以免受騙上當！
退換貨須知：
**提醒您，鑑賞期不等於試用期，退回商品須為全新狀態**
-
依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」，以下商品購買後，除商品本身有瑕疵外，將不提供7天的猶豫期：
- 易於腐敗、保存期限較短或解約時即將逾期。（如：生鮮食品）
- 依消費者要求所為之客製化給付。（客製化商品）
- 報紙、期刊或雜誌。（含MOOK、外文雜誌）
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。（如：電子書、電子雜誌、下載版軟體、虛擬商品…等）
- 已拆封之個人衛生用品。（如：內衣褲、刮鬍刀、除毛刀…等）
- 若非上列種類商品，均享有到貨7天的猶豫期（含例假日）。
- 辦理退換貨時，商品（組合商品恕無法接受單獨退貨）必須是您收到商品時的原始狀態（包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等），請勿直接使用原廠包裝寄送，或於原廠包裝上黏貼紙張或書寫文字。
- 退回商品若無法回復原狀，將請您負擔回復原狀所需費用，嚴重時將影響您的退貨權益。
商品評價