2.2.6 實(shí)時(shí)構(gòu)建

監(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
```
 ![運(yùn)行效果圖](http://upload-images.jianshu.io/upload_images/1366458-87a0eff030a02a70.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,368評(píng)論 7 35
  • 構(gòu)建一個(gè)小項(xiàng)目——FlyBird,學(xué)習(xí)webpack和react。(本文成文于2017/2/25) 從webpac...
    布蕾布蕾閱讀 17,128評(píng)論 31 98
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,568評(píng)論 19 139
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,445評(píng)論 4 31
  • 需要實(shí)現(xiàn)下面的兩個(gè)方法
    xing_xing閱讀 140評(píng)論 0 0

友情鏈接更多精彩內(nèi)容