搭建本地開(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)行打包操作。
- 通過(guò)命令
yarn add webpack-dev-server安裝 webpack 本地開(kāi)發(fā)服務(wù)器插件。
- 在之前
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)瀏覽器
}
}
- 新建 public 文件夾，這個(gè)名稱是固定的。把 index.html 文件移動(dòng)到該目錄下，并且修改 bundle.js 路徑。
- 通過(guò)命令
npx webpack-dev-server運(yùn)行本地開(kāi)發(fā)服務(wù)器，運(yùn)行后頁(yè)面會(huì)自動(dòng)打開(kāi)。
- 嘗試修改樣式文件 styles/index.scss 將 $height 改為 50px。
- 保存樣式文件后直接訪問(wèn)剛才打開(kāi)的頁(yè)面，可以看到已經(jīng)實(shí)時(shí)更新了。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-638635.html
原文鏈接：菜園前端文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-638635.html
到了這里，關(guān)于搭建本地開(kāi)發(fā)服務(wù)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
