搭建本地開(kāi)發(fā)服務(wù)器

:::warning 注意
在上一個(gè)案例的基礎(chǔ)上添加本地開(kāi)發(fā)服務(wù)器，請(qǐng)保留上個(gè)案例的代碼。如需要請(qǐng)查看 Webpack 使用。
:::

搭建本地開(kāi)發(fā)服務(wù)器這一個(gè)環(huán)節(jié)是非常有必要的，我們不可能每次修改源代碼就重新打包一次。這樣的操作是不是太繁瑣了。所以本地開(kāi)發(fā)服務(wù)器的作用就能體現(xiàn)了，它會(huì)自動(dòng)監(jiān)聽(tīng)我們的入口文件所關(guān)聯(lián)的文件是否有變化，如果有則自動(dòng)進(jìn)行打包操作。

1. 通過(guò)命令 yarn add webpack-dev-server 安裝 webpack 本地開(kāi)發(fā)服務(wù)器插件。

2. 在之前 webpack.config.js 配置的基礎(chǔ)上額外添加本地開(kāi)發(fā)服務(wù)器配置。

module.exports = {/*** 開(kāi)發(fā)服務(wù)器*/devServer: {port: 8000, // 啟動(dòng)的端口號(hào)open: true // 啟動(dòng)服務(wù)后自動(dòng)打開(kāi)瀏覽器}
}

3. 新建 public 文件夾，這個(gè)名稱是固定的。把 index.html 文件移動(dòng)到該目錄下，并且修改 bundle.js 路徑。

4. 通過(guò)命令 npx webpack-dev-server 運(yùn)行本地開(kāi)發(fā)服務(wù)器，運(yùn)行后頁(yè)面會(huì)自動(dòng)打開(kāi)。

5. 嘗試修改樣式文件 styles/index.scss 將 $height 改為 50px。

6. 保存樣式文件后直接訪問(wèn)剛才打開(kāi)的頁(yè)面，可以看到已經(jīng)實(shí)時(shí)更新了。

原文鏈接：菜園前端