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进程号