More Related Content
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
- 6. Why we need to bundle CSS?
• Preprocessor
– SCSS、SASS
– LESS
• Import Font、Image
• HTTP request speed
- 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?
- 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 等純前端套件的管理系統漸漸式微
- 24. webpack.config.js
• entry
• output
• resolve
• module - loaders
• devtool
• watch
• plugins
– ExtractTextPlugin
– BrowserSyncPlugin
– ProvidePlugin
– WebpackErrorNotificationPlugin
– UglifyJsPlugin