1 工程化
前端自動化或者半自動化工程，需要實現以下功能：
- 合併和壓縮 Javascript、CSS 程式碼 。
- CSS 預處理： Less ， Sass, Stylus 的編譯。
- 生成雪碧圖（CSS Sprite）。
- ES6 轉換為 ES5 語法。
- 模組化。
名稱解析：
Less 是一門 CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件。
Sass 是一個將指令碼解析成 CSS 的指令碼語言，即 SassScript。
stylus，是 CSS 的預處理框架。
CSS Sprites 在國內很多人叫 css 精靈，是一種網頁圖片應用處理方式 。 它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了 。
2 webpack 簡介
本質上， webpack 是一個現代 JavaScript 應用程式的靜態模組打包器 (module bundler) 。 當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖 (dependency graph) ，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。 下圖是 webpack 的模組化示意圖：
左邊是我們所寫的各種前端格式檔案，這些檔案會通過在 webpack 中定義的特定載入器（ Loader ）編譯之後，統一生成右邊的靜態資原始檔。
在 Webpack 中，圖片、CSS 檔案以及字型，都被稱為模組，這些模組彼此存在依賴關係， webpack 會處理這些模組之間的依賴關係，然後打包。
舉個例子：在常規的 html 中，如果我們需要引入一個 css 檔案，通常在 html 頁面的 <head> 部分使用 <link> 將其引入：
<link rel="stylesheet" type="text/css" href="style.css">
複製程式碼而在 webpack 中，我們可以直接在 .js 檔案中匯入 CSS：
import 'style.css';//ES 2015 語法
複製程式碼webpack 在打包時， style.css 會被打包進一個 js 檔案，然後通過動態建立 <style> 的形式來載入 css 樣式。還可以進一步配置 webpack ，讓它在打包編譯時把所有的 css 都提取出來，生成一個 css 檔案。
3 webpack 適用場景
webpack 適用於單頁 Web 應用（ single page web application ， SPA ）。SPA 指的是：只有一張 Web 頁面，並會在使用者與應用程式互動時動態更新該頁面的 Web 應用程式 。
SPA 有這些特點：
| 特點 | 說明 |
|---|---|
| 速度 | 更好的使用者體驗，讓使用者在 web app 中感受到 native app 的速度和流暢。 |
| MVVM | 經典 MVVM 開發模式，前後端各負其責 。 |
| ajax | 重前端，業務邏輯全部在本地操作，資料都需要通過 AJAX 同步 、 提交 。 |
| 路由 | 在 URL 中採用 # 號來作為當前檢視的地址 , 改變 # 號後的引數，頁面並不會過載 。 |
4 ES6 匯入、匯出語法
SPA 中的一個模組就是一個 JS 檔案，它擁有獨立的作用域，並且內部定義的變數，外部是無法獲取的。所以我們必須匯出一個模組，然後再匯入到需要呼叫它的其它模組中，這樣才能正常使用。而這些操作，就會用到 ES6 匯入、匯出語法。
4.1 export （匯出）
export 用於匯出模組，比如我們想匯出一個乘法函式：
export function multiple(a, b) {
return a * b;
}
複製程式碼4.2 import （匯入）
export 用於匯入模組，比如我們想在 main.js 中匯入剛才的那個乘法函式：
import {multiple} from "./multiple";
console.log(multiple(2,3));//6
複製程式碼