Modern Front-End Workflow with

Webpacktz5514 周昱安

About Me

• 國立彰化師範大學 資訊工程學系 四年級

• 努力畢業中，準備前往中央資工所軟工碩士班

• 前後端都寫，最近比較喜歡寫前端

• Laravel Taiwan 社群常客

• Github：github.com/tz5514

前言

Front-End Assets

Bundle 這件事對 Assets 進行一些

轉譯、打包、壓縮、額外加工處理

Why we need to bundle CSS?

• Preprocessor– SCSS、SASS– LESS

• Import Font、Image• HTTP request speed

SCSS ─ 可維護性更高的CSS

Variables 變數

Nesting 巢狀結構

Mixins

Import

Why we need to bundle JS?

• ES6• Module system• React JSX

• 這三樣需求目前瀏覽器都無法直接的完美運行

ECMAScript 6

• ECMAScript 是 JavaScript 的語言標準規格，後者是前者的實作品

• Node.js 是 ECMAScript 在伺服器端的實作品語言

• ECMAScript 6 是 2015 年時正式發表的新一代版本標準

• 簡言之，ES6 就是新版的 JavaScript。

What's wrong with ES6?

• 瀏覽器端的支援還不夠普遍， 目前僅支援部份 ES6 新功能

• 某些使用者可能永遠也不會更新到支援 ES6 的瀏覽器

• 因此現階段，我們需要一個 ES6 to ES5 的轉換器 ─ Babel

Module system

• 命名衝突– 全域命名空間下容易造成變數命名衝突，尤其是跟第三方套件衝突時更難解決

• 程式碼間的順序與依賴性維護困難– 開發人員必須自行理解並解決不同 JS 檔案之間，以及與第三方套件的相互依賴關係

• 在大型專案中各種資源難以管理，長期積累的問題導致程式碼庫混亂不堪

Why we need it?

But....

• JavaScript 這個語言長時間以來都沒有設計這樣子的模組機制

• 直到 ES6 才有了官方的模組機制功能

常見的社群規範

• CommonJS：Node.js 的參考規範• AMD• UMD

• ES6 的官方模組機制融合了 CommonJS 與 AMD 優點• Wabpack 對於 CommonJS、AMD、ES6 Module 皆支援

CommonJS

React JSX• JSX 是熱門前端庫 React 使用的一種 JavaScript 特別語法，看起來像是在 JS 程式碼中直接寫HTML

• 目的是為了讓開發人員撰寫更容易維護的 React 程式碼

• 瀏覽器無法直接辨識，所以一樣需要轉換器來幫忙轉成原生的 JS 程式碼

– Babel

瀏覽器能夠支援的原生程式碼難以撰寫與維護，

因此我們先撰寫一些好維護但瀏覽器看不懂的程式碼與模組架構，

然後再交給工具來幫我們翻譯並打包成瀏覽器看的懂的，

以順利在使用者的瀏覽器上正常執行。

而這個工具就是 Webpack。

NPM（Node Package Manager）• NPM 本身是 Node.js（後端）的套件管理系統

• 因為 Node.js 的逐漸熱門以及 NPM 的普及，前端的 JS 或 CSS 套件也被放

上了 NPM，逐漸也成為了前端的套件管理系統主流

• Bower 等純前端套件的管理系統漸漸式微

Package.json

Webpack 101

Why webpack?

• 性能優勢

• 可分拆的 bundle 個體

• 多樣性的插件

• HMR（React 開發神器）

webpack.config.js

webpack.config.js• entry• output• resolve• module - loaders• devtool• watch• plugins

– ExtractTextPlugin– BrowserSyncPlugin– ProvidePlugin– WebpackErrorNotificationPlugin– UglifyJsPlugin

Demo

Thanks!

參考資料

• http://blog.visioncan.com/2011/sass-scss-your-css/

• http://tw.peep-squirrel.com/itcontent-2296114.html