1.安裝webpack
npm install webpack -g //全局安裝
npm install webpack --save-dev //開發環境
2.使用webpack
創建一個webpack.config.js文件，這個文件是webpack的配置文件。該文件配置主要分為：entry,output,module
這里就不過多的贅述webpack的基本使用了
文件目錄如下：
webpack.config.js基本配置：
package.json配置：
name 和 version是必須的。通過--save-dev安裝的依賴就會添加到devDependencies中，通過--save安裝的依賴就會添加到dependencies中，scripts是用來執行腳本命令的，可以通過npm run commanName來執行。
3.熱更新
因為該項目用ES6，所以需要babel轉換
安裝babel：npm install babel-preset-es2015 --save-dev
配置.babelrc文件：{"presets": ["es2015"]}
到目前為止，在命令行輸入：npm run build，就可以正常打開本地的index.html文件了
那么在運行npm run build命令時，到底做了寫什么？
1.首先這個命令會去運行package.json文件里面的scripts腳本
2.scripts腳本首先通過babel把drag編譯成.temp臨時文文件
3.第三步是scripts會去執行webpack打包命令，該命令會去查找webpack.config.js配置文件中的entry和output，然后輸出一個build/bunble.js文件
4.然后就在本地可以打開index.html文件了
到了這一步，只完成了一小步，因此如果我修改一個文件，我還需要手動去運行上面的那個命令，然后在刷新瀏覽器，才能看到更改后的效果，這樣開發效率就會大大降低。這時我們需要“熱更新”來幫助我們快速開發。
1）安裝webpack-dev-server
npm install webpack-dev-server --save-dev
2)啟動服務器：
package.json: webpack-dev-server --progress --colors也可以把該如下，寫進scripts腳本。
這會綁定一個小型的express服務器到localhost:8090，來為你的靜態資源及bunble（自動編譯）服務。
通過訪問localhost:8090，.temp文件沒改變一次，bunble就會被重新編譯。
但是到目前為止，index.html還是個本地文件，怎么生成一個服務器上的Index.html文件呢？
這時就需要使用到官方推薦的:html-webpack-plugin插件
4.html-webpack-plugin
1）安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
2)配置html-webpack-plugin
webpack.config.js:
然后打開：http://localhost:8090/index.html，就可以看到效果。
然后可以修改.temp下的文件，就可以實現熱更新了。
但是到這里還有一個很大的問題沒有解決，我只有通過改變babel編譯后的.temp文件才能實現熱更新，因為webpack的入口文件是編譯后的.temp文件。那么我怎么樣做，能監控到源文件變化，然后在自動執行babel轉換並且重新打包呢？
5.webapck +babel
這時就需要把webapck和babel結合起來使用。
這里我使用的方法是配置webpack.config.js
1)把webpack.config.js文件改成webpack.config.babel.js
2)然后把之前通過配置.babelrc文件，並且通過scripts的babel drag --out-dir .temp 轉換的方式，改成通過webpack的babel-loader去實現。
webpack.config.babel.js:
然后把package.json里面的scripts命令改成：
"build": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
然后再打開http://localhost:8090/index.html，修改源文件就實現熱更新的功能了。
最終的結構目錄如下：
