webpack 2 webpack-dev-server

前面咱們每次運行老是雙擊打開dist下的index.html文件，然而在咱們作項目的時候這樣是不行的，咱們須要啓動一個本地服務。這裏咱們使用webpack提供的webpack-dev-server。

安裝  npm install wekpack-dev-server -D  

   wekpack-dev-server內部經過express實現, 運行時並不真正的生成打包文件，只是生成內存中的打包。

  下面是webpack-dev-server的一些配置  

devServer: {   //開發服務器的配置
    host: 0.0.0.0,   //主機號
    port: 3000,      //端口號
    hot: true,       //熱替換
    hotOnly: true,   //編譯失敗時不刷新頁面，只適用於cli
    progress: true,  //進度條
    contentBase: './dist',  //靜態服務根路徑
    compress: true,       //對靜態資源使用gzip壓縮
    headers: {            //向全部請求添加header
      'token': '3M46VI52N35MPZN409'
    },
    historyApiFallBack: {   //用來應對返回404頁面時定向到特定頁面用的
        rewrites: [{
            form: /./, to: '/404.html'
        }]
    },
    proxy: {   //代理
        "/api": "http://localhost:8080",          //對/api/users的請求將會經過代理請求到http://localhost:8080/api/users
        "/m": {
            target: "http://localhost:9090",      //若是不想將/m傳遞過去，須要重寫path
            pathRewrite: {"^/m" : ""}
        },
        "/info":  {
            target: "http://localhost:5555",
            bypass: function(req, res, proxyOptions) {         //對於瀏覽器的請求，只但願提供html網頁的訪問，而對於api請求，則將請求代理到指定服務。
                if (req.headers.accept.indexOf("html") !== -1) {
                    console.log("Skipping proxy for browser request.");
                    return "/index.html";
                }
            }
        }
    },
    https: {   //支持HTTPS  開發環境應該不多用到吧
        
    },
    overlay: true,    //編譯出錯的信息會展現在瀏覽器上
    stats: "errors-only",        //控制編譯的時候shell上的輸出內容  errors-only-產生error日誌  minimal-只打印errors或文件第一次被編譯時   none-禁止打印日誌  normal-標準打印日誌  verbose-打印全部日誌
    quiet: true,  //當它被設置爲true的時候，控制檯只輸出第一次編譯的信息，當你保存後再次編譯的時候不會輸出任何內容，包括錯誤和警告  默認false
    lazy: true,   //只有在請求時才進行編譯，webpack不會監控文件的變化。當在lazy模式下，watchOptions將不會被啓用。若是在CLI下使用，須要確保inline mode被禁用
}

 配置 npm script :

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.dev.js"
}

開發環境服務跑起來~~~    npm run dev