當(dāng)今的很多網(wǎng)頁其實可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實踐方法：
a:模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;
b:類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能 ? ? ? ? ? ? ? ? ? ? ? ? ? JavaScript文件使瀏覽器可以識別；
c:scss，less等CSS預(yù)處理器.........
這些改進(jìn)確實大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識別,而手動處理又是非常反鎖的，這就為WebPack類的工具的出現(xiàn)提供了需求。
什么是webpack？
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
webpack已經(jīng)是大部分前端項目打包工具的首選，grunt、glup、browserify等逐漸淪為輔助甚至完全被替代。在grunt、glup、browserify等已經(jīng)相當(dāng)火了之后，webpack長江后浪推前浪，把前輩們拍死在沙灘上，實力驚人。
可以毫不夸張的說，webpack已經(jīng)是你下山行走江湖，叱咤風(fēng)云的必備技能。
webpack2入門
安裝
npm install webpack -g
npm install webpack@< version> --save-dev
創(chuàng)建一個 bundle 文件
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
查看幫助：
.\node_modules\.bin\webpack --help # windows 用戶請使用此路徑
現(xiàn)在在 app 子目錄下創(chuàng)建一個 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 () {
...
同時還要在剛剛創(chuàng)建的html文件中引入bundle文件
< script src="dist/bundle.js"></scipt>
現(xiàn)在在此文件夾下運行 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]
