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 創造漂亮的東西。總是有辦法的，且我會給你按照你想要的樣子做出自己的網站的關鍵方法。
感謝你考慮這門課程。 我把所有我想到的東西都放進去了。 我會每隔幾週添加更多章節。 如有任何問題，請隨時與我聯繫。 我很樂意幫助並了解還有什麼令人困惑的事課程中還沒包含。
- Law
目標受眾
- 任何想獲得比平常的 webpack 設置更多視覺化、程式碼驅動指導的人。
- 任何希望看到真實世界的 webpack 怪異和邊緣、沒有在其他課程中涉及的工作範例的人。
- 任何想要比其同事了解更多現代 JavaScript 開發的人。
講師簡介
Lawrence Whiteside Web 架構師
英文字幕：有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
LN+ 免費支援 Notion 筆記整合：有
如果你有使用或是想用 Notion 來做線上課程筆記，我們有開發一個 chrome extension – LN+ for udemy ，可以免費支援這門線上課程
什麼是 LN+ ? 可以參考這篇文章說明
報名參加課程
也許你會有興趣
- 更多 Javascript 相關線上課程介紹
- 更多 React 相關線上課程介紹
- 更多 Angular 相關線上課程介紹
- 更多開發工具相關線上課程介紹
- ★想要加強英文能力嗎？– 練好英文是最大的學習槓桿
★ 歡迎使用 App / Email | Telegram 訂閱 網站更新★