webpack： 服務和熱更新

做爲一個前端工程師，最大的編程需求之一就是所見即所得的工具，也就是常說的熱更新。如今通常有點規模的公司都爲前端工程師準備了雙屏顯示器，其目的就是一個屏幕編寫代碼，一個屏幕實時顯示頁面效果。

設置webpack-dev-server

要執行webpack-dev-server是要先下載 webpack-dev-server。

npm install webpack-dev-server –save-dev

下載好後，須要配置一下devServer。最簡單的devServer配置項只有四個。

/webpack.config.js

devServer:{
        //設置基本目錄結構
        contentBase:path.resolve(__dirname,'dist'),
        //服務器的IP地址，能夠使用IP也能夠使用localhost
        host:'localhost',
        //服務端壓縮是否開啓
        compress:true,
        //配置服務端口號
        port:1717
    }

contentBase:配置服務器基本運行路徑，用於找到程序打包地址。
host：服務運行地址，建議使用本機IP，這裏爲了方便，因此用localhost。
compress：服務器端壓縮選型，通常設置爲開啓。
port：服務運行端口，建議不使用80，很容易被佔用，這裏使用了1717.

配置好後，能夠試着在終端中輸入webpack-dev-server,每每提示下面的錯誤（或者是沒法找到內部或外部命令）。

出現下面的錯誤不用慌張，咱們只要在package.json裏配置一下scripts選項就能夠執行了。

/package.json

"scripts": {
    "server":"webpack-dev-server"
 },

配置好保存後，在終端裏輸入 npm run server 打開服務器。而後在瀏覽器地址欄輸入http://localhost:1717就能夠看到結果了。

支持熱更新

在npm run server 啓動後，它是有一種監控機制的（也叫watch）。它能夠監控到咱們修改源碼，並當即在瀏覽器裏給咱們更新。

注意：這裏只是咱們的webpack3.6版本支持，在3.5版本時要支持熱更新還須要一些其餘的操做。