寫在前面：
（1）為了防止版本兼容問(wèn)題，此處的webpack版本與之前的一致為：webpack@3.6.0惊豺。同時(shí)這里我們安裝的webpack-dev-server版本是2.9.7版本旷偿。
（2）之前已經(jīng)安裝了node.js
在此之前我們一直采用live-server充當(dāng)本地服務(wù)器，其實(shí)這與webpack是不怎么搭配的，現(xiàn)在我們可以利用webpack自帶的webpack-dev-server來(lái)構(gòu)建一個(gè)本地服務(wù)器（基于node.js架構(gòu)）--讓瀏覽器檢測(cè)代碼修改，并自動(dòng)刷新修改后的結(jié)果无虚。由于webpack-dev-server是一個(gè)單獨(dú)的組件，因此在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴。
1.安裝webpack-dev-server
本地安裝指定版本的webpack-dev-server：
npm install --save-dev webpack-dev-server@2.9.7
若npm安裝失敗输莺，選擇cnpm安裝成功率會(huì)高些丈冬。
2.配置devserver選項(xiàng)
2.1 在webpack.config.js中配置devserver選項(xiàng)
/webpack.config.js：
devServer:{
//設(shè)置基本目錄結(jié)構(gòu)
contentBase:path.resolve(__dirname,'dist'), //本地服務(wù)器所加載的頁(yè)面所在的目錄
//服務(wù)器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服務(wù)端壓縮是否開(kāi)啟
compress:true,
//配置服務(wù)端口號(hào)
port:1818
}
注釋：
1.contentBase:配置服務(wù)器基本運(yùn)行路徑，用于找到程序打包地址准给。
2.host：服務(wù)運(yùn)行地址畔规，建議使用本機(jī)IP畜埋。
3.compress：服務(wù)器端壓縮選型，一般設(shè)置為開(kāi)啟。
4.port：服務(wù)運(yùn)行端口，建議不使用80，很容易被占用，這里使用了1818
2.2 命令配置
由于webpack-dev-server是本地安裝的，相關(guān)文件被安裝到了本地目錄的的開(kāi)發(fā)環(huán)境中金闽。然后需要在package.json中手動(dòng)配置命令才能運(yùn)行node_modules下面的相關(guān)指令挤庇；直接運(yùn)行 webpack-dev-server命令會(huì)無(wú)法找到內(nèi)部或外部命令昆咽。
/package.json：
"scripts": {
"server":"webpack-dev-server"
},
結(jié)構(gòu)圖為：
配置好并保存后，在webstorm終端里輸入 npm run server 打開(kāi)服務(wù)器殖告。然后在瀏覽器地址欄輸入 http://localhost:1818 就可以看到結(jié)果了爽丹。
3.熱更新
在npm run server啟動(dòng)后，它是有一種監(jiān)控機(jī)制的（也叫watch）软啼。它可以監(jiān)控到我們修改源碼贿条，并立即在瀏覽器里給我們實(shí)時(shí)更新钓葫，但是它不是真正的打包豆同，它類似于在內(nèi)存中進(jìn)行了打包。所以本地文件并沒(méi)有變化辆床。
注意：這里只是我們的webpack3.6版本支持咨堤，在3.5版本時(shí)要支持熱更新還需要一些其他的操作。如果都設(shè)置好了，但是不進(jìn)行熱更新，可能是系統(tǒng)的問(wèn)題，在Linux和Ma上支持良好炊琉，在Windows上有時(shí)會(huì)出現(xiàn)問(wèn)題箕般。
