不使用熱部署
根據(jù)第二篇文章,我們現(xiàn)在已經(jīng)搭建好了環(huán)境,并且也寫了一個React入門demo,但是存在一個修改時的問題:我們每次開發(fā)完成之后都需要在命令行輸入webpack打包生成bundle.js后才能運(yùn)行查看結(jié)果:
1.修改內(nèi)容
圖片.png
2.進(jìn)入目錄打包
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ pwd
/Users/panyuanyuan/java/react-native/react_more/0504
shizhengyangdeMacBook-Pro:0504 panyuanyuan$ webpack
3.觀察運(yùn)行
圖片.png
熱部署情況下
上面的模式開發(fā)的時候會影響效率,這時候我們可以使用熱部署
1.熱部署命令
這次我們觀察運(yùn)行結(jié)果的時候不適用webpack,而使用webpack --watch.這樣就實現(xiàn)了熱部署
webpack --watch
2.觀察結(jié)果
圖片.png
修改js文件,刷新文件
圖片.png
3.服務(wù)熱加載
我們還可以以服務(wù)的方式進(jìn)行熱加載:保持上面的窗口不懂,打開新的終端輸入:
webpack-dev-server --inline --hot
這時候我們就可以以服務(wù)的方式啟動訪問,并且也是熱部署:
圖片.png
修改js文件后刷新頁面:
圖片.png
