前端打包工具是一種將前端代碼進行轉換，壓縮以及合併等操作的程序工具。目前常見的有grunt，webpack等。
它能將我們前端人員寫得less,sass等編譯成css.將多個js文件合併壓縮成一個js文件。它的作用就是通過將代碼編譯、壓縮，合併等操作，來減少代碼體積，減少網絡請求。以及方便在服務器上運行。目前，會使用web前端打包工具是現代前端人員必備技能。
webpack
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作爲模塊來使用和處理。它將一堆文件中的每個文件都作爲一個模塊，找出它們的依賴關係，將它們打包爲可部署的靜態資源。
我們可以直接使用 require(XXX) 的形式來引入各模塊，即使它們可能需要經過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因爲 webpack 有着各種健全的加載器（loader）在默默處理這些事情。
一個基本的例子，想像我們有一些 CommonJS 模塊，它們不能直接在瀏覽器中運行，所以我們需要打包成一個文件，這樣就可以通過 <script> 標籤加載。webpack 可以遵循 require() 調用的依賴關係，爲我們完成這些工作。
但是 webpack 可以做的不止這些。通過“loader”，我們可以配置 webpack 以任何方式去轉換所有類型的文件。包括以下例子：
- 轉換 ES2015，CoffeeScript 或者 TypeScript 模塊爲普通的 ES5 CommonJS 模塊；
- 可以選擇在編譯之前檢驗你的源代碼；
- 將 Jade 模版轉換爲純 HTML 並且嵌入 Javascript 字符串中；
- 將 Sass 文件轉換爲純 CSS，然後將其轉換成 JavaScript 片段，將生成的 CSS 作爲
<style>標籤插入頁面； - 處理 HTML 或者 CSS 中引用的圖片，移動到配置的路徑中，並且使用 md5 hash 重命名。
當你理解 webpack 原理後會感覺它是如此強大，它可以大大優化你的前端工作流程。它主要的缺點是配置複雜麻煩。
webpack模塊引入
一. HTML
直接在頁面引入 webpack 最終生成的頁面腳本即可，不用再寫什麼 data-main 或 seajs.use 了：
<!DOCTYPE html>
<html>
<head
lang="en">
<meta
charset="UTF-8">
<title>demo</title>
</head>
<body>
<script
src="dist/js/page/common.js"></script>
<script
src="dist/js/page/index.js"></script>
</body>
</html>
可以看到我們連樣式都不用引入，畢竟腳本執行時會動態生成<style>並標籤打到head裏。
二. JS
各腳本模塊可以直接使用 commonJS 來書寫，並可以直接引入未經編譯的模塊，比如 JSX、sass、coffee等（只要你在 webpack.config.js 裏配置好了對應的加載器）。
我們再看看編譯前的頁面入口文件（index.js）：
require('../../css/reset.scss'); //加載初始化樣式
require('../../css/allComponent.scss'); //加載組件樣式
var
React = require('react');
var
AppWrap = require('../component/AppWrap'); //加載組件
var
createRedux = require('redux').createRedux;
var
Provider = require('redux/react').Provider;
var
stores = require('AppStore');
var
redux = createRedux(stores);
var
App = React.createClass({
render: function() {
return
(
<Provider redux={redux}>
{function() { return
<AppWrap />; }}
</Provider>
);
}
});
React.render(
<App />, document.body
);
一切就是這麼簡單麼麼噠~ 後續各種有的沒的，webpack 都會幫你進行處理。