webpack-dev-server搭建本地服務器的實現

前言

當我們使用webpack打包時,發現每次更新瞭一點代碼,都需要重新打包,這樣很麻煩,我們希望本地能搭建一個服務器,然後寫入新的代碼能夠自動檢測出來,這時候就需要用到webpack-dev-server

webpack-deb-server

webpack提供瞭一個可選的本地開發服務器,這個本地服務器基於node.js搭建,內部使用express框架,可以實現我們想要的瀏覽器自動刷新顯示我們修改後的結果

由於它是個單獨的模塊,使用之前,我們需要先安裝,命令如下:

npm install -D webpack-dev-server 

安裝完成之後,我們也是需要在webpack中進行配置,配置的對象是devServer ,它也有很多的屬性,常用的幾個屬性如下:

  • contentBase:為哪一個文件提供本地服務,默認是根文件,我們這裡要填寫./dist
  • port:端口號,默認是8080
  • inline:頁面實時刷新
  • historyApiFallBack:在SPA(單頁面復應用)頁面中,依賴HTML5的history模式

webpack.config.js配置如下:

module.exports = {
   devServer: {
        contentBase: "./dist",
        inline: true,
    },
}

接下來我們再在package.json文件中添加一條script命令:

"scripts": {
    "dev": "webpack serve"
  },

dev代表開發環境,以上我們的配置就算完成瞭 

webpack-dev-server啟動報錯

然後我們啟動命令npm run dev,程序出現以下報錯:

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

原因是webpack-cli的版本問題,我們先來看以下我們的版本

"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

然後啟動就不會報錯瞭,但是這隻是臨時的解決方案,我們推薦第二種解決方式 

解決方案2

更改scripts中的配置,將原來的webpack-dev-serve改為webpack serve即可

"scripts": {
    "dev": "webpack serve --open --mode development"
},

最後我們在終端輸入npm run dev就可正常啟動,並且會自動打開網頁,因為我們加瞭參數–open,如果想手動打開,則取出–open即可

解決端口占用問題

如果你通過vue+webpack已經啟動瞭一個項目,但是你又執行瞭一遍npm run dev,此時就會報以下錯誤

Error: listen EADDRINUSE: address already in use 127.0.0.1:8080

原因是我們上次啟動的默認端口是8080,這次你又項啟動一個項目端口依然是8080,但是8080端口已經被占用瞭,解決辦法我們隻需要將8080端口對應的PID進程號殺死即可

首先查找8080端口對應的進程ID

lsof -i:8080

找到對應的PID後使用kill命令殺死即可

kill -9 PID進程號

到此這篇關於webpack-dev-server搭建本地服務器 的文章就介紹到這瞭,更多相關webpack-dev-server搭建本地服務器 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: