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

赞 (0)

相关推荐

  • 浅谈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远程访问配置方法

    下面的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处理跨域请求的方法

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

  • 详解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的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.

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

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

  • 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-deb-server webpack-dev-server启动报错 解决方案1 解决方案2 解决端口占用问题 前言 当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以

  • 关于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

  • Tomcat搭建本地服务器的图文教程

    运用背景 相信很多人都使用webpack搭建过小型服务器,那么如果没有webpack配置和依赖管理时,如何启动项目呢?办法有很多,诸如PHPnow,WampServer都可以,本文重点介绍如何使用Tomcat搭建本地服务器. 什么是Tomcat? Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样认为,当在一台机器上配置好Apache 服务器,可利

  • nodejs搭建本地服务器轻松解决跨域问题

    nodejs搭建本地服务器轻松解决跨域问题

    最近把以前用jquery写的一个小demo拿出来运行的,刚开始的时候忘了开启本地服务导致控制台一直报XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%22lcl@qq.com%22,%22pwd%22:%22Home20170702%22}. Cross origin requests are only supported for protocol schemes:

  • nodejs搭建本地服务器并访问文件操作示例

    nodejs搭建本地服务器并访问文件操作示例

    本文实例讲述了nodejs搭建本地服务器并访问文件操作.分享给大家供大家参考,具体如下: 安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html>

  • 基于http.server搭建局域网服务器过程解析

    不知道大家有没有遇到过这样的情况, 在做项目或者研发的时候,迫切想要将一个文件传输给另一台电脑,却找不到U盘,于是麻烦的通过登陆qq.微信等社交软件 ,或者邮箱等工具进行传输,十分麻烦,让人苦恼.都说Python号称无所不能,除了生孩子啥都行!于是小编今天就给大家介绍一种简单的方式来解决这一问题,通过调用Python中的http.server搭建局域网服务器,让这个问题变得So easy ! 1. 一行Python命令一行Python命令如何搭建局域网,其实很简单,我们用了Python里面的一条

  • 利用nodeJs anywhere搭建本地服务器环境的方法

    公司有个微信端项目,需要前端在手机上随时查看网页,于是乎用Node搭建了一个本地服务器环境,把网页地址发到QQ并用手机打开来查看. 首先去nodeJs官网下载最新版nodeJs https://nodejs.org/en/ 安装成功后win+r打开cmd 输入node -help 或者node -v查看是否安装成功 装好后输入 npm install anywhere -g来安装anywhere.注意如果是mac系统会提示你权限不够,需要在代码前加上 sudo获取管理员权限.即sudo npm

  • 使用live-server快速搭建本地服务器+自动刷新的方法

    1.安装 $ sudo npm install -g live-server 2.使用下面的命令会自动打开当前目录下面的index.html $ live-server 以上这篇使用live-server快速搭建本地服务器+自动刷新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • nodejs搭建本地服务器并访问文件的方法

    nodejs搭建本地服务器并访问文件的方法

    安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html> <html lang="en"> <head>

  • 使用gulp搭建本地服务器并实现模拟ajax

    使用gulp搭建本地服务器并实现模拟ajax

    本文主要给大家总结了在工作中可能会用到的小工具,在此记录一下. 可以实现的功能有: 1. 本地http服务器 2.页面实时刷新 3.可以模拟ajax请求 第一步,新建package.json文件. 用到了gulp.gulp-webserver.gulp-livereload package.json的内容如下: { "name": "localserver", "version": "1.0.0", "descrip

随机推荐