1. 程式人生 > >webpack-服務和熱更新

webpack-服務和熱更新

今天來分享一招,看標題,熱更新,其實就是即寫即現,當然如果你用的是雙屏電腦這樣更便於開發,就能及時看到你所要的效果。

設定webpack-dev-server
在設定webpack-dev-server前要npm install webpack-dev-server ––save-dev下載,然後配置devServer,簡單的配置devServer只有四項。如下程式碼:
/webpack.config.js

devServer:{
        //設定基本目錄結構
        contentBase:path.resolve(__dirname,'dist'),
        //伺服器的IP地址,可以使用IP也可以使用localhost
host:'localhost', //服務端壓縮是否開啟 compress:true, //配置服務埠號,建議不使用80,很容易被佔用,這裡使用了4350,你也可以用自己喜歡的數字來作為埠號 port:4350 }//配置webpack開發。服務配置伺服器基本執行路徑,用於找到程式打包地址

安裝失敗原因:
- 我安裝的時候有個ERR報錯,原因是缺少檔案,這個我就不知道缺少哪個檔案了,不過肯定是node_modules裡缺少了,因為我做這個之前看這個檔案多東西了,就傻傻的刪除了,應該都是有用的檔案,所以小夥伴們在下載完每一項的時候都注意一下。之後就用到之前我說的方法,把這個資料夾刪除,重新建立npm install,然後再npm run server看效果。
- 若還是有問題,就是顯示無法找到內部或外部命令(或者其他)可以在package.json檔案中這樣修改:

"scripts": {
    "server": "webpack-dev-server --open"
  },

–open就是你執行完後自動給你開啟網頁的一個寫法,就不需要你還要複製了網頁連結再去瀏覽器打開了。

所以要成為一個優秀的開發者不止要細心還有重視出過的錯並把它記錄下來。