快捷導(dǎo)航

webpack-dev-server搭建本地服務(wù)器的實(shí)現(xiàn)

更新時(shí)間：2021年07月14日 11:29:24 作者：Silent丿丶黑羽

當(dāng)我們使用webpack打包時(shí)，發(fā)現(xiàn)每次更新了一點(diǎn)代碼，都需要重新打包，我們希望本地能搭建一個(gè)服務(wù)器，本文就介紹如何使用webpack-dev-server搭建本地服務(wù)器，感興趣的可以了解一下

前言

當(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è)可選的本地開(kāi)發(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代表開(kāi)發(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)打開(kāi)網(wǎng)頁(yè)，因?yàn)槲覀兗恿藚?shù)--open，如果想手動(dòng)打開(kāi)，則取出--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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: