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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[contenthash:6].bundle.js',
},
devServer: {
publicPath: '.'
contentBase: path.resolve(__dirname, './dist'),
port: 3000,
compress: true,
open: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack 5',
template: path.resolve(__dirname, './src/template/index.html'),
filename: 'index.[contenthash:6].html',
inject: 'body',
}),
new CleanWebpackPlugin(),
]
};

這邊稍微介紹一下上方 devServer 屬性的用途。

首先是 contentBasecontentBase 顧名思義就是要打開模擬伺服器的檔案路徑,而在此因為我們編譯後的資料夾是 dist,因此就直接寫 path.resolve(__dirname, './dist') 即可

port 屬性簡單來講就是我們開發時「」後面所帶的數字,比較常見的有 4000300080808000 等,這邊是可以自己決定用哪一個的,如果是以 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 當作首頁,因此這邊要稍微調整一下 HtmlWebpackPluginfilename 就可以囉(改成:「filename: 'index.html',」)。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ