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