Webpack 5 走起! - devServe(5) - webpack-dev-server
前言
前面使用了一些還滿好用的插件,接下來也要加入另一個好用的功能,也就是我們開發常用的模擬伺服器。
webpack-dev-server
webpack-dev-server 這個功能簡單來講就是當我們輸入 npm run dev
完畢之後,它會自動開啟一個瀏覽器以便我們即時看到畫面上的修改與變化,如果沒有這個東西的存在,我想我們每次編譯之後都要開另一個視窗來使用模擬伺服器開啟,可以說是相當的麻煩,因此這邊就依照官方網站的說明來安裝即可
1 | npm install webpack-dev-server --save-dev |
接下來這邊設置就比較特別一點了,它並不是屬於插件的一種,因此並不會在 plugins
屬性中設置,而是直接新增一個 devServer
的屬性
1 | const path = require('path'); |
這邊稍微介紹一下上方 devServer
屬性的用途。
首先是 contentBase
,contentBase
顧名思義就是要打開模擬伺服器的檔案路徑,而在此因為我們編譯後的資料夾是 dist,因此就直接寫 path.resolve(__dirname, './dist')
即可
port
屬性簡單來講就是我們開發時「:
」後面所帶的數字,比較常見的有 4000
、3000
、8080
、8000
等,這邊是可以自己決定用哪一個的,如果是以 Vue Cli 的來講則是 8080
。
compress
主要是將我們所有的檔案壓縮變成 .gzip 的檔案,這樣子在我開啟瀏覽器時的速度就會比較快速,當然因為會有壓縮這個行為,所以就會吃一些資源囉~
open
這個屬性就是當你執行模擬伺服器時是否要自動開啟瀏覽器的意思,其中官方網站也有說明另一種開啟方式,就是指定瀏覽器開啟 open: 'Google Chrome',
,但基本上走預設瀏覽器就可以了。
hot
又稱之為 HMR (Hot Module Replacement),透過啟用這個屬性,當我們修改 src 底下的資源時,也會同時更新模擬伺服器。
那麼我們該如何啟用這個模擬伺服器呢?依照官方指令我們是必須輸入 webpack serve
的,而在此我們就直接修改 package.json 原有的 dev
指令即可
1 | "dev": "webpack serve" |
接下來只需要輸入 npm run dev
就可以開啟模擬伺服器了。
但是這邊會發生一點怪狀況,就是不管你怎麼開都是空白畫面,其實這個原因在於我們編譯 index.html 時重新命名使用了 hash 的關係,預設瀏覽器只會找 index.html 當作首頁,因此這邊要稍微調整一下 HtmlWebpackPlugin
的 filename
就可以囉(改成:「filename: 'index.html',
」)。