SITCON 2016 ─ Modern Front-End Workflow with Webpack
0 likes344 views
Modern Front-End Workflow with Webpack.
More Related Content
What's hot (20)
Similar to SITCON 2016 ─ Modern Front-End Workflow with Webpack (20)
SITCON 2016 ─ Modern Front-End Workflow with Webpack
- 2. About Me ? 國立彰化師範大學 資訊工程學系 四年級 ? 努力畢業中，準備前往中央資工所軟工碩 士班 ? 前後端都寫，最近比較喜歡寫前端 ? Laravel Taiwan 社群常客 ? Github：github.com/tz5514
- 3. 前言
- 5. Bundle 這件事 對 Assets 進行一些 轉譯、打包、壓縮、額外加工處理
- 6. Why we need to bundle CSS? ? Preprocessor – SCSS、SASS – LESS ? Import Font、Image ? HTTP request speed
- 7. SCSS ─ 可維護性更高的CSS Variables 變數 Nesting 巢狀結構
- 9. Why we need to bundle JS? ? ES6 ? Module system ? React JSX ? 這三樣需求目前瀏覽器都無法直接的完美運行
- 10. ECMAScript 6 ? ECMAScript 是 JavaScript 的語言標準規格，後者是前者的實作品 ? Node.js 是 ECMAScript 在伺服器端的實作品語言 ? ECMAScript 6 是 2015 年時正式發表的新一代版本標準 ? 簡言之，ES6 就是新版的 JavaScript。
- 11. What's wrong with ES6? ? 瀏覽器端的支援還不夠普遍， 目前僅支援部份 ES6 新功能 ? 某些使用者可能永遠也不會更新到支援 ES6 的瀏覽器 ? 因此現階段，我們需要一個 ES6 to ES5 的轉換器 ─ Babel
- 12. Module system ? 命名衝突 – 全域命名空間下容易造成變數命名衝突，尤其是跟第三方套件衝突時更難解決 ? 程式碼間的順序與依賴性維護困難 – 開發人員必須自行理解並解決不同 JS 檔案之間，以及與第三方套件的相互依賴關係 ? 在大型專案中各種資源難以管理，長期積累的問題導致程式碼庫混亂不堪 Why we need it?
- 13. But.... ? JavaScript 這個語言長時間以來都沒有設計 這樣子的模組機制 ? 直到 ES6 才有了官方的模組機制功能
- 14. 常見的社群規範 ? CommonJS：Node.js 的參考規範 ? AMD ? UMD ? ES6 的官方模組機制融合了 CommonJS 與 AMD 優點 ? Wabpack 對於 CommonJS、AMD、ES6 Module 皆支援
- 15. CommonJS
- 16. React JSX ? JSX 是熱門前端庫 React 使用的一種 JavaScript 特別語法，看起來像是在 JS 程式碼中直接寫HTML ? 目的是為了讓開發人員撰寫更容易維護的 React 程式碼 ? 瀏覽器無法直接辨識，所以一樣需要轉換器來幫忙轉成原生的 JS 程式碼 – Babel
- 18. NPM（Node Package Manager） ? NPM 本身是 Node.js（後端）的套件管理系統 ? 因為 Node.js 的逐漸熱門以及 NPM 的普及，前端的 JS 或 CSS 套件也被放 上了 NPM，逐漸也成為了前端的套件管理系統主流 ? Bower 等純前端套件的管理系統漸漸式微
- 19. Package.json
- 20. Webpack 101
- 22. Why webpack? ? 性能優勢 ? 可分拆的 bundle 個體 ? 多樣性的插件 ? HMR（React 開發神器）
- 24. webpack.config.js ? entry ? output ? resolve ? module - loaders ? devtool ? watch ? plugins – ExtractTextPlugin – BrowserSyncPlugin – ProvidePlugin – WebpackErrorNotificationPlugin – UglifyJsPlugin
- 25. Demo
- 26. Thanks!