什麼是webpack
webpack是一款子產品加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖檔等都作為子產品來使用和處理。
webpack的特點
豐富的插件，友善進行開發工作
大量的加載器，包括加載各種靜态資源
代碼分割，提供按需加載的能力
釋出工具
webpack的優勢
webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支援也很全面，友善舊項目進行代碼遷移。
能被子產品化的不僅僅是 JS 了。
開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖檔轉base64等。
擴充性強，插件機制完善，特别是支援 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。
下面開始學習：
1.全局安裝：
npm install webpack –g
安裝完成之後輸入 webpack –help 通過檢視提示資訊來檢驗是否安裝完成。
2.在目标标目錄下輸入 npm init 進行一個npm的初始化。然後一路回車，然後再進行一個本地安裝npm install webpack –-save-dev
打包
1.在根目錄下建立一個entry.js檔案裡面簡單的寫點東西
再在根目錄下建立一個index頁面，并簡單的寫點東西，并在index裡面鍊入一個js檔案，如：bundle.js，這個js檔案會通過webpack生成，這是我們的輸出檔案。同時index裡面的id要和entry.js裡的id一緻
2.輸入webpack entry.js bundle.js會 在根目錄下生成一個bundle.js的檔案,此時在entry.js中你自己寫入的業務代碼已經打包進了bundle.js中。你可以打開bundle.js檔案去檢視裡面的代碼，可以看到你在entry.js中寫入的業務代碼，在最下面。
此時你打開浏覽器看看index，看到個hello就對了
3.在根目錄下建立一個name.js檔案 在裡面定義一個module并暴露，再簡寫點東西比如：
4.在入口檔案entry.js中引入name.js所暴露的借口
5.然後輸入webpack entry.js bundle.js将入口檔案的内容打包進bundle.js，然後在浏覽器中打開頁面看效果，會看到頁面中會生成hellocourse webpack；
CSS檔案的引入
1.這個功能是靠webpack的loader功能實作的。是以我們需要輸入：npm install css-loader style-loader –save-dev 來安裝這兩個loader
2.在根目錄下建立一個css檔案，并寫入一些簡單的樣式 如：body{background：red}
3在入口檔案中寫入引用css的代碼
此處的style！和css！是指加載的我們剛才安裝的loader
4.輸入webpack entry.js bundle.js指令，打包到bundle.js，然後檢視index網頁
說明我們的css已經已經成功的引入，也可以通過檢視bundle.js中的代碼，可以看到引進了許多子產品。
webpack的配置檔案
1.在根目錄下建立一個webpack.config.js檔案，然後再裡面寫入webpack的配置，并暴露出去。
這其中由于已經配置好了loader，是以在入口檔案entry.js中的引入的兩個css和style的loader就可略掉了省略
同時，在指令行中也不用專門寫webpack entry.js bundle.js這樣的命了，直接輸入webpack指令即可，他會根據我們的配置自動去打包到bundle.js中。
2.輸入webpack指令，然後檢視index頁面
引入成功
通過source-map來調試代碼
在webpack中必須使用source-map才能夠生成這些子產品的源檔案，才能在浏覽中檢視源碼并進行調試。
浏覽器的Sources中我們隻能看index.html和bundle.js兩個源檔案，我們建立的entry.js和name.js是看不到的
1.輸入webpack –devtool source-map
這樣就會生成一個source-map
2.回到浏覽器檢視Sources，會多出一個webpack檔案夾，裡面就有我們之前建立的檔案了并且也是能看到源碼的
可以在name中加入一個debugger來看一下變化
3.同理，我們也可以在config檔案中設定devtool來讓我們像剛才一樣，隻需要輸入一個webpack指令就能執行source-map的功能