實現webpack的實時打包構建
由於每次重新修改程式碼之後，都需要手動執行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現程式碼實時打包編譯，當修改程式碼之後，會自動進行打包構建。
執行cnpm i webpack-dev-server --save-dev安裝到開發依賴
安裝完成之後，在命令列直接執行webpack-dev-server來進行打包，發現報錯，此時需要藉助於package.json檔案中的指令，來進行執行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js檔案，這是因為webpack-dev-server將打包好的檔案放在了記憶體中

把bundle.js放在記憶體中的好處是：由於需要實時打包編譯，所以放在記憶體中速度會非常快
這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個資料夾的面板，需要點選到src目錄下，才能開啟我們的index首頁，此時引用不到bundle.js檔案，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin外掛配置啟動頁面
由於使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標籤的src屬性，所以推薦大家使用html-webpack-plugin外掛配置啟動頁面.
執行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
修改webpack.config.js配置檔案如下：

// 匯入處理路徑的模組
   var path = require('path');
   // 匯入自動生成HTMl檔案的外掛
   var htmlWebpackPlugin = require('html-webpack-plugin');

   module.exports = {
       entry: path.resolve(__dirname, 'src/js/main.js'), // 專案入口檔案
       output: { // 配置輸出選項
           path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
           filename: 'bundle.js' // 配置輸出的檔名
       },
       plugins:[ // 新增plugins節點配置外掛
           new htmlWebpackPlugin({
               template:path.resolve(__dirname, 'src/index.html'),//模板路徑
               filename:'index.html'//自動生成的HTML檔案的名稱
           })
       ]
   }

修改package.json中script節點中的dev指令如下：

"dev": "webpack-dev-server"
將index.html中script標籤註釋掉，因為html-webpack-plugin外掛會自動把bundle.js注入到index.html頁面中！