監(jiān)聽文件改動(dòng)并實(shí)時(shí)構(gòu)建,避免每次改動(dòng)都要手動(dòng)構(gòu)建才能看到效果。
在 webpack 中添加 --watch 開啟監(jiān)視功能,webpack 會(huì)首先構(gòu)建一次,然后依據(jù)構(gòu)建得到的依賴關(guān)系,對(duì)項(xiàng)目所依賴的所有文件進(jìn)行監(jiān)聽,一旦發(fā)生改動(dòng)則觸發(fā)重新構(gòu)建。
命令簡寫:
webpack -w
使用 webpack-dev-server 輔助開發(fā)調(diào)試,它是一個(gè)基于 Express 框架的 Node.js 服務(wù)器。它還提供了一個(gè)客戶端的運(yùn)行環(huán)境,會(huì)被注入到頁面代碼執(zhí)行,并通過 Socket.IO 與服務(wù)器通訊。
這樣服務(wù)器的每次改動(dòng)與重新構(gòu)建都會(huì)被通知到頁面上,頁面可以隨之做出反應(yīng)。除了最基本的自動(dòng)刷新,還提供有如模塊熱替換(Hot Module Replacement)這樣強(qiáng)大的功能。
安裝:
npm install webpack-dev-server -g
啟動(dòng):
webpack-dev-server
```
默認(rèn)監(jiān)聽 8080 端口
webpack-dev-server 的配置
1. **命令行參數(shù)的形式傳遞**
2. ** webpack.config.js 的 export 中添加字段 devServer 實(shí)現(xiàn)**。[詳見官方文檔](https://webpack.github.io/docs/webpack-dev-server.html)
```
webpack-dev-server -w
```
