WebPack入門教學筆記

WebPack入門教學

Webpack與其他前端打包工具(watchify、Browserify)定位不太同，它是一個模組(module)系統，透過這些豐富的模組來實現更多的功能，它有：

• 將CSS、圖片與其他資源打包至一個.js之中。
• 打包之前預處理(less、coffeescript、jsx等)。
• 依entry文件不同，把.js折分為多個.js
• 豐富的模組元件

安裝webpack

參考 https://webpack.github.io/docs/tutorials/getting-started/與

首先你必須安裝Node.js，我們需要使用npm進行套件的安裝與管理。

專案：npm install webpack --save-dev (儲存於專案目錄下)

全域：npm install webpack -g (global，存儲於本機之下)

前端開發神器 - Emmet LiveStyle

從Emmet到Emmet LiveStyle

之前介紹過Zen Coding，而Emmet是ZenCoding更進一步的進化版（PS. ZenCoding 已停止維護）。目前Emmet更發展一套Emmet LiveStyle的前端開發神器，各位可以先看一下範例影片：

Emmet LiveStyle主要功能

• 即時更新。即見即所得 -- 不需要進行檔案儲存，不需要頁面重載。
• 不需要本地端檔案。
• 跨平台。
• Multi-View與Multi-Device更新。你可以在不同的視窗中打開同一頁面並獲得即時更新。如果你的顯示器夠大，可以輕鬆地調整響應式設計是前所未有的！在一個視窗中 DevTools 所做的變更將自動反應到其他視窗。
• Multi-site更新。你甚至可以Live edit不同的Web-sites，例如，desktop和你的mobile版本網站共享相同的CSS程式碼。
• 極其簡單的設置：在編輯器中打開CSS檔，並將其與LiveStyle瀏覽器進行關聯。