当前位置:编程学习 > > 正文

webpack常用的配置(webpack-dev-server搭建本地服务器的实现)

时间:2021-10-08 00:16:21类别:编程学习

webpack常用的配置

webpack-dev-server搭建本地服务器的实现

前言

当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-server

webpack-deb-server

webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的浏览器自动刷新显示我们修改后的结果

由于它是个单独的模块,使用之前,我们需要先安装,命令如下:

  • npm install -D webpack-dev-server 
    
    
  • 安装完成之后,我们也是需要在webpack中进行配置,配置的对象是devServer ,它也有很多的属性,常用的几个属性如下:

    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搭建本地服务器 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐