1. 簡介
webpack-dev-server 是 webpack 集成的開發(fā)者服務(wù)器，用于幫助開發(fā)者快速開發(fā)應(yīng)用程序错森。
2. 如何展示頁面
我們來回顧一下，之前是如何展示頁面的。我用的是 webstorm翘瓮，點擊 html 文件右上角
即可打開網(wǎng)頁箱舞，當(dāng)然也可以直接將 html 文件拖到瀏覽器遍坟，也會為我們打開。這兩種方式有什么不同呢晴股？
-
直接將文件拖到瀏覽器愿伴，使用的是 file 協(xié)議
image.png -
使用 webstorm 的瀏覽器標(biāo)簽打開，使用的是 http 協(xié)議
image.png
簡單來講电湘，F(xiàn)ile 協(xié)議主要用于訪問本地計算機中的文件隔节，就如同在Windows資源管理器中打開文件一樣鹅经，而 http 協(xié)議是超文本傳輸協(xié)議，指定了客戶端可能發(fā)送給服務(wù)器什么樣的消息以及得到什么樣的響應(yīng)怎诫。目前這兩種方案都是 okay 的瘾晃，但是我們的網(wǎng)頁文件開發(fā)出來一般肯定是放在網(wǎng)上供其他用戶瀏覽的，另外刽虹，file 協(xié)議也會遇到跨域問題酗捌，所以開發(fā)時應(yīng)該使用 http 協(xié)議。
webstorm 實際上就是為我們開了一個本地服務(wù)器用來存放網(wǎng)頁文件涌哲，如果大家不使用 webstorm胖缤，也可以使用其他 ide 的該功能，或者使用 http-server阀圾，apache 等幫助實現(xiàn)一個本地服務(wù)器哪廓。這里就不細(xì)述了。
3. 頻繁編譯和刷新
我們編寫代碼以后如果想要更新網(wǎng)頁內(nèi)容初烘，需要在編寫代碼后涡真，需要重新運行一遍打包命令，然后刷新網(wǎng)頁肾筐，才能看到新增的代碼生效哆料。可以嘗試以下吗铐，將 sidebar.js 中的 sidebar 改為 sidebar2东亦，可以看到重新編譯，然后刷新網(wǎng)頁后生效唬渗。
// sidebar.js
export default function Sidebar() {
var dom = document.getElementById('root');
var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar2';
dom.appendChild(sidebar);
}
這無疑是影響開發(fā)效率的典阵。有沒有辦法能讓我們對代碼的修改能及時顯示到網(wǎng)頁上呢？
4. watch
我們在 build 命令后加一個參數(shù)镊逝，--watch壮啊，如下：
"scripts": {
"build": "webpack --watch"
},
重新運行編譯命令，然后修改 sidebar2 為 sidebar 3撑蒜，此時直接刷新網(wǎng)頁歹啼，發(fā)現(xiàn)內(nèi)容已經(jīng)更新。說明我們修改源文件后座菠，webpack 自動幫我們做了編譯染突。
事實上，啟用 Watch 模式辈灼。意味著在初始構(gòu)建之后，webpack 將繼續(xù)監(jiān)聽任何已解析文件的更改也榄。Watch 模式默認(rèn)關(guān)閉巡莹。
開啟 watch 模式的另一種方法是在 webpack.config.js 配置司志。
watch: true
或者使用 watchOptions 進(jìn)行更多的監(jiān)聽配置。
5. webpack-dev-server
上面我們已經(jīng)講到了降宅，html 文件應(yīng)該展示在服務(wù)器上骂远。使用 watch 能夠幫助我們監(jiān)聽文件的變動從而自動編譯，但是我們?nèi)匀灰謩铀⑿聣好娌拍苷故拘碌膬?nèi)容腰根，因為服務(wù)器是 ide 幫我們建立的激才，那么 webpack 是否能幫助我們建立服務(wù)器，并且提供一些配置额嘿，比如自動刷新呢瘸恼，答案是有的。
添加如下配置：
// webpack.config.js
devServer: {
contentBase: path.resolve(__dirname, 'dist')
},
// package.json
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
運行命令 npm i webpack-dev-server -D 下載該模塊册养。
然后運行命令 npm start东帅，如下：
打開 http://localhost:8080/，可以看到：
修改 sidebar 內(nèi)容后球拦，切到網(wǎng)頁靠闭，發(fā)現(xiàn)內(nèi)容已經(jīng)自動刷新：
其實，devServr 還為我們提供了很多配置選項來滿足開發(fā)者的需求坎炼，打開webpack-dev-server可以查看這些配置的使用方法愧膀。舉幾個簡單的例子如下：
// webpack.config.js
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
open: true,
port: 3000
},
運行 npm start 后，瀏覽器自動為我們打開頁面：
6. 使用 webpack-dev-middleware
其實谣光，早起的一些項目中檩淋，大家肯能會看見并沒有使用 devServer 這個配置項來開啟配置服務(wù)器，而是開發(fā)者新增一個 server.js 文件來實現(xiàn)這個服務(wù)器抢肛。這是由于早期 devServer 的功能還不穩(wěn)定狼钮，配置項也不豐富，但是現(xiàn)在大部分情況下這個配置已經(jīng)可以滿足了捡絮，如果大家想要定制化服務(wù)器熬芜，也可以手?jǐn)]一個并借助webpack-dev-middleware 來使用。
webpack-dev-middleware 是一個容器(wrapper)福稳，它可以把 webpack 處理后的文件傳遞給一個服務(wù)器(server)涎拉。 webpack-dev-server 在內(nèi)部使用了它，同時的圆，它也可以作為一個單獨的包來使用鼓拧，以便進(jìn)行更多自定義設(shè)置來實現(xiàn)更多的需求。
我們利用 express 來實現(xiàn)服務(wù)器越妈。首先季俩，安裝 express 和 webpack-dev-middleware：：
npm i -D express webpack-dev-middleware
在 webpack.config.js 的同級目錄添加一個文件 server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
在 scripts 新增一個腳本：
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"server": "node server.js"
},
運行腳本，npm run server梅掠。
打開 http://localhost:3000/ 即可看見網(wǎng)頁內(nèi)容酌住。修改內(nèi)容后會自動編譯店归，刷新頁面后頁面內(nèi)容更新。如果要實現(xiàn)上述 devServer 的其他配置項支持酪我，我們就需要不斷完善這個 server.js 的功能消痛。
關(guān)于 上述代碼中的 webpack 和 compiler 可以點擊 webpack-node-api 查看詳細(xì)內(nèi)容。
參考
百度百科-file
百度百科-http
webpack-watch
webpack-dev-server
webpack-dev-middleware
webpack-node-api
