我們?cè)谟脀ebpack打包文件残邀,如果打包出來的資源是帶有哈希值值骇,每打一次包因苹,就會(huì)出現(xiàn)一個(gè)不同哈希值的文件。為了避免后期出現(xiàn)很多資源文件蛤育,我們需要在每次打包把之前生成的資源先清除掉宛官,然后再打包,這就需要安裝clean-webpack-plugin插件瓦糕。
當(dāng)我們每次更改文件底洗,要預(yù)覽效果,都需要打包的話咕娄,那就顯得太麻煩了亥揖。為了實(shí)現(xiàn)熱更新,我是結(jié)合谷歌插件LiveReload實(shí)現(xiàn)的圣勒。
- 安裝http-server本地服務(wù)
- 首先在谷歌游覽器中安裝LiveReload插件费变,使其處于工作狀態(tài)
- 命令行webpack --watch ,它會(huì)監(jiān)控所有文件的改動(dòng),當(dāng)監(jiān)控到文件有改動(dòng)的時(shí)候圣贸,就會(huì)自動(dòng)打包
所有我們每次更改完文件胡控,進(jìn)行ctrl+s進(jìn)行保存的時(shí)候,就可以在游覽器上看到文件內(nèi)容變動(dòng)了旁趟。
此外也可以使用webpack的開發(fā)調(diào)試服務(wù)器webpack-dev-server昼激,通過這個(gè)服務(wù)我們更多的是想實(shí)現(xiàn)無刷新的處理編譯入口文件。
- cnpm install webpack-dev-server --g (注意這里是全局安裝)
- 啟動(dòng)服務(wù)器 webpack-dev-server --progress --colors