當今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法：
a:模塊化，讓我們可以把復雜的程序細化為小的文件;
b:類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，并且之后還能 ? ? ? ? ? ? ? ? ? ? ? ? ? JavaScript文件使瀏覽器可以識別；
c:scss，less等CSS預處理器.........
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現提供了需求。
什么是webpack？
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
webpack已經是大部分前端項目打包工具的首選，grunt、glup、browserify等逐漸淪為輔助甚至完全被替代。在grunt、glup、browserify等已經相當火了之后，webpack長江后浪推前浪，把前輩們拍死在沙灘上，實力驚人。
可以毫不夸張的說，webpack已經是你下山行走江湖，叱咤風云的必備技能。
webpack2入門
安裝
npm install webpack -g
npm install webpack@< version> --save-dev
創建一個 bundle 文件
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
查看幫助：
.\node_modules\.bin\webpack --help # windows 用戶請使用此路徑
現在在 app 子目錄下創建一個 index.js 文件。
function component () {
var element = document.createElement('div');
/* 需要引入 lodash，下一行才能正常工作 */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
在 index.js 中打包 lodash 依賴，首先我們需要安裝 lodash。
npm install --save lodash
然后 import lodash。
+ import _ from 'lodash';
function component () {
...
同時還要在剛剛創建的html文件中引入bundle文件
< script src="dist/bundle.js"></scipt>
現在在此文件夾下運行 webpack，其中 index.js 是輸入文件，bundle.js 是輸出文件，輸出文件已打包此頁面所需的所有代碼。
./node_modules/.bin/webpack app/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset ? ?Size ?Chunks ? ? ? ? ? ? ? ? ? ?Chunk Names
bundle.js ?544 kB ? ? ? 0 ?[emitted] ?[big] ?main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
