需求：

    在已有的專案基礎上整合webpack，babel支援es6轉碼壓縮

想要單獨使用請參考

    1.單獨使用webpack壓縮程式碼
        [https://segmentfault.com/a/1190000005742037](https://segmentfault.com/a/1190000005742037)
    2.單獨使用babel進行es6轉碼es5
        [http://www.cnblogs.com/yuanbo88/p/6389299.html](http://www.cnblogs.com/yuanbo88/p/6389299.html)

已有環境

    假設我們已經有了一個支援es6的web專案，並且安裝了nodejs，並且npm配置高速映象
 

沒有安裝的請參考一下資料

配置映象（二選一）

1.配置npm淘寶映象

你可以使用淘寶定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的 npm:

2.配置國內良心映象仍然是用npm命令

                npm config set registry https://registry.npm.taobao.org

安裝webpack

    1.首先全域性安裝webpack
        npm install webpack -g
    2.選擇安裝的版本
        npm install [email protected]
 
 --save-dev
        此命令也可以解決cmd不支援webpack命令
    3.如果要使用webpack開發工具，要單獨安裝 webpack-dev-server
        npm install webpack-dev-server --save-dev
    4.跳轉到當前專案下帶有packjson的目錄
        沒有packjson的預設建立再專案根目錄下建立
            packjson詳解
        我的是在專案的根目錄下的web下
    執行
        npm install --save-dev webpack webpack-dev-server
 

安裝webpack所需要的外掛

    1.安裝loaders 
        npm install style-loader css-loader 
        wepback的一大特色就是可以將一些瀏覽器不能原生支援的檔案通過loaders編譯成瀏覽器可以支援的檔案
    2.自動補全css3字首
        npm install --save-dev autoprefixer postcss-loader
    3.自動生成html外掛
        npm install html-webpack-plugin --save-dev
    4.提取樣式外掛（必須）
        把額外的資料加到編譯好的檔案中
        npm install extract-text-webpack-plugin --save-dev
    5.拷貝資源外掛（必須）
        在webpack中拷貝檔案和資料夾
        npm install copy-webpack-plugin --save-dev
    6.全域性掛載外掛
        webpack.ProvidePlugin [webpack內建外掛 ]

安裝babel

    npm install --save-dev babel-core babel-preset-es2015  
        可以選擇其他規則
        一共有四種規則
    npm install --save-dev babel-loader 

安裝對應的第三方庫

    如果未使用百度雲盤下載的專案可以不用安裝
    1.jquery
        npm install jquery
    2.d3.js
        npm install d3

啟動

    首次編譯
        webpack
    webpack --progress --colors --watch
啟動tomcat就可以看到網頁並且除錯了

webpack常用命令

    $ webpack --config webpack.min.js //另一份配置檔案
    $ webpack --display-error-details //顯示異常資訊
    $ webpack --watch   //監聽變動並自動打包
    $ webpack -p    //壓縮混淆指令碼，這個非常非常重要！
    $ webpack -d    //生成map對映檔案，告知哪些模組被最終打包到哪裡了
    當專案逐漸變大，webpack 的編譯時間會變長，可以通過引數讓編譯的輸出內容帶有進度和顏色
        webpack --progress --colors
    監聽模式
        webpack --progress --colors --watch
        作用：
            如果不想每次修改模組後都重新編譯，那麼可以啟動監聽模式。開啟監聽模式後，沒有變化的模組會在編譯後快取到記憶體中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的

參考資料連結

    1.單獨使用webpack壓縮程式碼
        https://segmentfault.com/a/1190000005742037
        http://www.runoob.com/w3cnote/webpack-tutorial.html
            比較推薦
    2.單獨使用babel進行es6轉碼es5
        http://www.cnblogs.com/yuanbo88/p/6389299.html
    3.零基礎入門webpack
        https://segmentfault.com/a/1190000005742037
    4.關於webpack外掛篇
        https://segmentfault.com/a/1190000005742122
    5.常用命令
        http://www.cnblogs.com/sloong/p/5584684.html