Webpack 4: 超越基礎課程

Contents

快速的程式碼驅動，Webpack，Babel ，React、Angular、Vue、SSR、TypeScript 的JavaScript 教學指南。

從這 6 小時的課程，你會學到

從頭開始製作你自己的 Hot-reloading Webpack boilerplate ( 樣板文件)。
如何為快速生產環境優化前端資產
使用 Markdown 建立一個作品專案組合或部落格
深入研究程式碼，包括 Webpack 載入器( loaders )和外掛 (plugins )
使用 SSR 和 JS / CSS 程式碼平行分割實現 Webpack的 “聖杯 ( Holy Grail , 比喻終極目標)”。
心領神會 Webpack、Babel、Node和更多 Javascript 程式庫的內部運作。
使用 SSL 和雲端建構一個多網域( multi-domain )應用程式，如 SquareSpace、Wordpress MU 或 Tumblr。
使用 Chrome DevTools 來偵錯、檢查和審核其程式碼的性能。

要求

你應該已受過初步的培訓或者有使用程式碼和安裝程式的經驗。
你應該熱切希望能快速行動，深入探究這些程式庫的原理和應用方式
你應該知道命令行是什麼，並且準備好程式碼編輯器跟著課程實作

課程說明

歡迎使用 Web 駭客的 cookbook，使用 Webpack 模組載入器( module loader )和資產打包器( asset bundler )來建構的現代 JavaScript 應用程式。

我為所有技能水準的人設計這門課。它主要是給那些已經有點基本知識但還覺得有點混亂的人，希望能更了解 Webpack。每個章節都是事先書寫和排練過的。以讓你充分利用時間，不浪費你一分一秒來精心編製這個課程。

以專案為中心建構真實世界的 Webpack 應用程式，給你和你的公司可以使用這些應用程式，從第一行程式碼起。首先我們來了解最佳的 Webpack 開發設定。接著跟著做並編寫程式碼，我們使用 Hot Module Reloading、Babel 和在 Node 的除錯功能建構一個像 Ghost 一樣的Markdown 部落格。

然後，我們深入了解 Webpack 可如何優化你的生產打包，因為我們將樣板文件( boilerplate )強化為專案組合網站，包含藝廊( gallery )和搜索功能，可用於任何專案。這裡涵蓋從快取(Caching) 到 CDN 到 HTTP2、GZip、Brotili 壓縮、tree-shaking 和漸進式網路應用程式( Progressive web apps ) 等所有內容。

接著我們深入細節。探索 Webpack Loaders 和 Plugins 。

最後的專案有點難。我們將專案組合網站擴展到 WordPress MU、Tumblr 或 SquareSpace 的多域節點重寫( multi-domain node rewrite)。我們深入挖掘最新的 Webpack 3＆4 特性，其中包括伺服器端渲染( Server-side Rendering )，帶有“魔術註釋( magic comments )”的動態輸入，並且我們使用 Universal React 組合元件和平行的 CSS 塊( chunks )完成。你一定會想要看完這門課程。

一路上，我將討論 Webpack 整合的所有框架和程式庫。無論你是在使用傳統的 Rails 還是其他後端專案，或者只是想用 EJS、Pug、Handlebars、Sass、Less 或 Stylus 創造漂亮的東西。總是有辦法的，且我會給你按照你想要的樣子做出自己的網站的關鍵方法。

感謝你考慮這門課程。我把所有我想到的東西都放進去了。我會每隔幾週添加更多章節。如有任何問題，請隨時與我聯繫。我很樂意幫助並了解還有什麼令人困惑的事課程中還沒包含。

目標受眾

任何想獲得比平常的 webpack 設置更多視覺化、程式碼驅動指導的人。
任何希望看到真實世界的 webpack 怪異和邊緣、沒有在其他課程中涉及的工作範例的人。
任何想要比其同事了解更多現代 JavaScript 開發的人。

講師簡介

Lawrence Whiteside Web 架構師

Lawrence 是一個熱愛教學、創業和遠端工作的終身學習者。他是網路和行動應用程式的自由工作者。自 90 年代中期以來，他一直在專業地做這件事，當時網路剛起且他也很年輕。他的下一個挑戰是回饋給他的開發人員社區，教授既有用且大多隱藏在文件或程式碼背後的工具和技術。在這樣做的過程中，他希望能再次繼續他的學習。