目錄

• 前言
  
• webpack-deb-server
  
• webpack-dev-server啟動報錯
  
• 解決方案1
  
• 解決方案2
  
• 解決端口占用問題
  

前言

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

webpack-deb-server

webpack提供了一個可選的本地開發伺服器，這個本地伺服器基於node.搭建，內部使用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",www.cppcns.com
 
      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

然後啟動就www.cppcns.com不會報錯了，但是這只是臨OGHnKu時的解決方案，我們推薦第二種解決方式

解決方案2

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

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

最後我們在終端輸入npm run dev就可正常啟動，並且會自動開啟，因為我們加了引數--open，如果想手動開啟，則取出--open即可

解決端口占用問題

如果你通過+webpack已經啟動了一個專案，但是你又執行了一遍npm run dev，此時就會報以下錯誤

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

原因是我們上次啟動的預設埠是8080，這次你又項啟動一個專案埠依然是8080，但是8080埠已經被佔用了，解決辦法我們只需要將8080埠對應OGHnKu的PID程序號殺死即可

首先查詢8080埠對應的程序ID

lsof -i:8080

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

kill -9 PID程序號

到此這篇關於webpack-dev-server搭建本地伺服器 的文章就介紹到這了,更多相關webpack-dev-server搭建本地伺服器 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！