webpack（10）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進程號