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

目录
  • 前言
  • webpack-deb-server
  • webpack-dev-server启动报错
    • 解决方案1
    • 解决方案2
    • 解决端口占用问题

前言

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

时间: 2021-07-14

使用webpack3.0配置webpack-dev-server教程

最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍有不少坑,一方面是由于自己对文档的不熟悉,不了解webpack-dev-server的运作模式:另一方面,在翻阅了不少博客和文章后,发现不少配置实际上都跑不起来(有可能是版本的原因,也有可能是我自己配置的原因).所以我打算用webpack3.0把dev-server跑起来给大家演示一遍,顺便把一些配

浅谈webpack-dev-server的配置和使用

本文介绍了浅谈webpack-dev-server的配置和使用,分享给大家,具体如下: 1安装的WebPack-dev-server 在终端输入 npm i webpack-dev-server 安装webpack-dev-server包 2.配置dev-server 在package.json文件中的脚本中添加代码 "dev":"WebPack-dev-server --config webpack.config.js" 在webpack.config.js文件中

详解webpack-dev-server使用方法

记录下webpack-dev-server的用法. 首先,我们来看看基本的webpack.config.js的写法 module.exports = { entry: './src/js/index.js', output: { path: './dist/js', filename: 'bundle.js' } } 配置文件提供一个入口和一个出口,webpack根据这个来进行js的打包和编译工作.虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包,输出新

webpack-dev-server远程访问配置方法

下面的package.json文件中配置的webpack-dev-server为开发模式,可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "rimraf dist &

详解Webpack-dev-server的proxy用法

前言 如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用. 解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~) 在webpack.config.js中配置 下面简单介绍一下五个经常使用的场景 使用一: mmodule.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; 请求到 /api/xxx 现在会被代理到请求

详解webpack-dev-server的简单使用

webpack-dev-server webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = require("path"); module.exports = { entry:{ app:["./app/main.

使用webpack-dev-server处理跨域请求的方法

在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章 关于跨域问题的一个解决方法中其实已经讨论了一些可以使用的方法. 如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型.而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好. 所以就有一个念想突然在大脑中闪过--加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁

webpack-dev-server自动更新页面方法

这两天在看webpack,今天卡在webpack-dev-server上了,折腾了一下午,一直无法正常运行,每次服务器也提示正常启动了,但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面.最后找到一个帖子,发现原来是我启动服务器的代码有问题. 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev 代码如下: 1.项目结构如下: 2.webpack.

关于Webpack dev server热加载失败的解决方法

利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

采用C#实现软件自动更新的方法

本文实例分析了采用C#实现软件自动更新的方法,是非常实用的功能,值得学习和借鉴.具体如下: 1.问题概述: 长期以来,广大程序员为到底是使用Client/Server,还是使用Browser/Server结构争论不休,在这些争论当中,C/S结构的程序可 维护性差,布置困难,升级不方便,维护成本高就是一个相当重要的因素.有很多企业用户就是因为这个原因而放弃使用C/S.然而当一个应用必须要使用C/S 结构才能很好的实现其功能的时候,我们该如何解决客户端的部署与自动升级问题?部署很简单,只要点击安装程

Electron autoUpdater实现Windows安装包自动更新的方法

前言 Electron帮助我们突破浏览器的界限,通过Electron构建的桌面应用拥有各种浏览器应用梦寐以求的能力. Electron提供的autoUpdater还可以帮助我们实现桌面应用的自动更新. 文件结构 首先,我们已经有了一个基于Electron做的应用,项目中有两个package.json.这样做的一个原因是将devDependencies和dependencies分开了,另外就是不需要在打包的时候再去指定哪些依赖不需要一起打到安装包里面去了(通过ignore参数). 目录结构类似于这

SQL Server自动更新统计信息的基本算法

自动更新统计信息的基本算法是: · 如果表格是在 tempdb 数据库表的基数是小于 6,自动更新到表的每个六个修改. · 如果表的基数是大于 6,但小于或等于 500,更新状态每 500 的修改. · 如果基数大于 500,表为更新统计信息时(500 + 20%的表)发生了更改. · 表变量为基数的更改不会触发自动更新统计信息. 注意:此严格意义上讲,SQL Server 计算基数为表中的行数. 注意:除了基数,该谓语的选择性也会影响 AutoStats 生成.这意味着该统计信息可能无法更新的

c# Winform 程序自动更新实现方法

Winform程序自动更新我也是第一次做,网上找了自动更新的源码,后来又根据在网上看到的一些方法,自己试了很久,最终还是有写错误,所以花了钱让别人帮忙调试成功的,下面是我自己捣腾出来的,方便大家借鉴,如果有什么错误的地方欢迎指正. 1.由于我是通过服务器的IIS发布自动更新的,更新之前先手动把程序复制到IIS服务器的目录下面,做一些更改,客户端才能正常自动更新.所以第一步是不熟IIS服务器(本人系统windows8): 按照上面的方式,选了之后点确定,系统会自动添加这些内容,然后: 网站建立好了

微信小程序版本自动更新的方法

公司的小程序项目上线, 后期还会有小型的版本迭代. 为了让用户能在我们进行版本迭代后及时使用最新版本的功能. 做了以下优化.. 知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台: 当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁. 知识点2: 小程序的启动分为"冷启动" 和 "热启动". 热启动是指: 小程序打开后,在一段时间内(目前:5分

php自动更新版权信息显示的方法

本文实例讲述了php自动更新版权信息显示的方法.分享给大家供大家参考.具体分析如下: 我们一般会在页面下方输出版权信息,包含年份信息,每年都要修改,这段简单的代码帮你解决这个问题,自动更新年份 function autoUpdatingCopyright($startYear){ // given start year (e.g. 2004) $startYear = intval($startYear); // current year (e.g. 2007) $year = intval(d

默认浏览器设置及vue自动打开页面的方法

以下为windows 系统操作,仅供参考. 一.修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器. 1.首先打开"开始菜单",点击"控制面板": 2.在"控制面板"里面找到"默认程序",进入后点击"设置默认程序": 3.加载好后选择 "谷歌浏览器": 4.选择"将此程序设置为默认值",如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果.

Windows下支持自动更新的Electron应用脚手架的方法

前言 之前写过一篇关于 Windows 下通过 Electron 自带的 autoUpdater 实现应用自动更新的文章,很多小伙伴私信问我要具体实现代码,不过因为之前一直很忙(还有懒...). 这两周正好周末比较空,除了在 github 上搭建了一个脚手架,还顺便把实现优化了一波,下面将会带着大家从零开始详细介绍实现过程,对小白也很友好的教程哦. 从零开始 进入你的工作目录,比如 d/workspace # 目录 d/workspace mkdir electron-demo # 新建文件夹