webpack-dev-server搭建本地服務(wù)器的實(shí)現(xiàn)
前言
當(dāng)我們使用webpack打包時(shí),發(fā)現(xiàn)每次更新了一點(diǎn)代碼,都需要重新打包,這樣很麻煩,我們希望本地能搭建一個(gè)服務(wù)器,然后寫入新的代碼能夠自動(dòng)檢測(cè)出來(lái),這時(shí)候就需要用到webpack-dev-server
webpack-deb-server
webpack提供了一個(gè)可選的本地開發(fā)服務(wù)器,這個(gè)本地服務(wù)器基于node.js搭建,內(nèi)部使用express框架,可以實(shí)現(xiàn)我們想要的瀏覽器自動(dòng)刷新顯示我們修改后的結(jié)果
由于它是個(gè)單獨(dú)的模塊,使用之前,我們需要先安裝,命令如下:
npm install -D webpack-dev-server
安裝完成之后,我們也是需要在webpack中進(jìn)行配置,配置的對(duì)象是devServer ,它也有很多的屬性,常用的幾個(gè)屬性如下:
- contentBase:為哪一個(gè)文件提供本地服務(wù),默認(rèn)是根文件,我們這里要填寫./dist
- port:端口號(hào),默認(rèn)是8080
- inline:頁(yè)面實(shí)時(shí)刷新
- historyApiFallBack:在SPA(單頁(yè)面復(fù)應(yīng)用)頁(yè)面中,依賴HTML5的history模式
webpack.config.js配置如下:
module.exports = { devServer: { contentBase: "./dist", inline: true, }, }
接下來(lái)我們?cè)僭趐ackage.json文件中添加一條script命令:
"scripts": { "dev": "webpack serve" },
dev代表開發(fā)環(huán)境,以上我們的配置就算完成了
webpack-dev-server啟動(dòng)報(bào)錯(cuò)
然后我們啟動(dòng)命令npm run dev,程序出現(xiàn)以下報(bào)錯(cuò):
Error: Cannot find module 'webpack-cli/bin/config-yargs'
原因是webpack-cli的版本問(wèn)題,我們先來(lái)看以下我們的版本
"webpack": "^5.44.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2"
解決方案1
降低webpack-cli的版本,從4降到3
1.卸載webpack-cli
npm uninstall webpack-cli
2.安裝webpack-cli@3
npm install webpack-cli@3 -D
然后啟動(dòng)就不會(huì)報(bào)錯(cuò)了,但是這只是臨時(shí)的解決方案,我們推薦第二種解決方式
解決方案2
更改scripts中的配置,將原來(lái)的webpack-dev-serve改為webpack serve即可
"scripts": { "dev": "webpack serve --open --mode development" },
最后我們?cè)诮K端輸入npm run dev就可正常啟動(dòng),并且會(huì)自動(dòng)打開網(wǎng)頁(yè),因?yàn)槲覀兗恿藚?shù)--open,如果想手動(dòng)打開,則取出--open即可
解決端口占用問(wèn)題
如果你通過(guò)vue+webpack已經(jīng)啟動(dòng)了一個(gè)項(xiàng)目,但是你又執(zhí)行了一遍npm run dev,此時(shí)就會(huì)報(bào)以下錯(cuò)誤
Error: listen EADDRINUSE: address already in use 127.0.0.1:8080
原因是我們上次啟動(dòng)的默認(rèn)端口是8080,這次你又項(xiàng)啟動(dòng)一個(gè)項(xiàng)目端口依然是8080,但是8080端口已經(jīng)被占用了,解決辦法我們只需要將8080端口對(duì)應(yīng)的PID進(jìn)程號(hào)殺死即可
首先查找8080端口對(duì)應(yīng)的進(jìn)程ID
lsof -i:8080
找到對(duì)應(yīng)的PID后使用kill命令殺死即可
kill -9 PID進(jìn)程號(hào)
到此這篇關(guān)于webpack-dev-server搭建本地服務(wù)器 的文章就介紹到這了,更多相關(guān)webpack-dev-server搭建本地服務(wù)器 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js獲取指定字符前/后的字符串簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js獲取指定字符前/后的字符串簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
這篇文章主要介紹了jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量的實(shí)現(xiàn)方法,非常的實(shí)用,這里推薦給小伙伴,有需要的朋友可以參考下。2015-04-04JavaScript Event學(xué)習(xí)第二章 Event瀏覽器兼容性
在這一章我將對(duì)重要的事件做一個(gè)概述,包括一些流行的瀏覽器的兼容性問(wèn)題。2010-02-02微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例
這篇文章主要介紹了微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10JavaScript高級(jí)?ES7-ES13?新特性詳解
這篇文章主要介紹了JavaScript高級(jí)?ES7-ES13?新特性詳解,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02