fbpx

Webpack 4: 超越基礎課程

快速的程式碼驅動,Webpack,Babel ,ReactAngular、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 架構師

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

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

課程網址   ♥找優惠折扣碼?

Sponsored by Udemy

也許你會有興趣

喜歡我們的分享嗎? 使用以下的社群分享按鈕分享給你的朋友吧!

Spread the love

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: