webpack-dev-server启动后, localhost:8080返回index.html的原理

webpack-dev-server详解
最新推荐文章于 2024-04-29 14:00:07 发布
最新推荐文章于 2024-04-29 14:00:07 发布
阅读量260 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： webpack json 前端 ViewUI
原文链接：https://juejin.im/post/5c7a969cf265da2dcb679cb9
本文深入解析webpack-dev-server的工作原理及其实现细节，介绍如何在本地开发环境中使用它进行前端项目调试，包括安装依赖、配置scripts及运行流程。

webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。

webpack-dev-server主要用于前端项目的本地开发和调试。

具体使用，只需要在package.json的devDependencies里添加它的依赖即可。

同样在package.json里定义dev script，执行该webpack-dev-server, 这样用命令行npm run dev就可启动webpack-dev-server.

其原理是，npm install后，webpack-dev-server.js就会自动出现在当前项目文件夹的node_modules目录里：

Webpack-dev-server.js的服务器实例通过关键字new创建出来：

在Server.js的内部实现里，第76行我们就能观察到该服务器采用nodejs的express模块实现。

Express实例创建后，通过第78行app.all('*', ... )挂接处理函数，这个箭头函数(req,res,next) => { 负责处理所有发往这个服务器的HTTP请求。

第92行就是Server.js里webpackDevMiddleware的初始化过程。

现在我们就来看看浏览器里输入localhost:8080后会发生什么事情。

根据前面的描述，浏览器发起前往localhost:8080的请求被webpackDevMiddleware服务，见下图调试截图，其中变量req.url为/，这是我们期望看到的，因为localhost:8080后面没有跟任何路径。

最终会将执行流投递到processRequest函数里，第53行代码说明，如果HTTP请求路径/后没有子路径，则默认返回一个硬编码的index.html

谜团就这样解开了。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

解决无法启动Tomcat或访问localhost:8080的问题
heinara的博客
07-18 4500
Tomcat访问出错问题1、问题描述2、解决eclipse启动Tomcat访问localhost:80803、解决cmd启动Tomcat访问localhost:80804、结语 1、问题描述 之前jdk更新过后用的是jdk-12.0.2，Tomcat仍然使用8.0。在eclipse中启动tomcat后，进行jsp页面编写和访问都是没有问题的，但是最近要建立网站，想着直接用cmd启动tomcat，发现一直闪退，而且用elipse启动tomcat后却不能直接访问http:localhost:8080，报404错
VUE的基础配置（适合初学者）
heart__to的博客
12-16 1372
创建项目的前期准备工作 1.安装node-v-12.41.1-64.mis(可以再任何位置，安装时都默认) 2.在管理员身份cmd中输入node -v看见版本号则安装成功 3.下载插件npm install -g cnpm --registry=https://registry.npm.taobao.org 这是不用翻墙的插件（虚拟环境） 输入npm -v出现版本号则安装成功 4.cnpm install -g webpack 5.cnpm install -g vue-cli 6.cnpm instal
webpack-dev-server启动后，localhost:8080返回index.html的原理
cnmik42448的专栏
10-21 1136
webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。 webpack-dev...
【Webpack】devServer 实验报告
油墨香^-^的博客
03-07 882
没有指定 output.publicPath，默认为 '/'，这时 index.html 引用其他模块的 url 会是 /bundle.xxxhashxxx.js，这时这个资源的 url 就变成了 example.com/bundle.xxxhashxxx.js，毫无疑问，这个资源会 404 Not Found。这里不难看出，wdm(compiler) 的执行结果返回的是一个中间件，它将 webpack 编译后的文件存储到内存中，然后在用户访问 express 服务时，将内存中对应的资源输出返回。
基于maven的web项目在Eclipse中使用Tomcat调试
Y1986810913的专栏
11-11 1122
以前开发用过jetty来调试maven项目，不过那时也有点浑浑噩噩的，就是使用而已，业余时间都奉献给了游戏。最近在鼓捣maven，就记录一下最近搭建Eclipse中使用Tomcat调试maven项目的过程，以后忘记或者中间有什么问题时可以查到。 废话不多说，下面开始搭建：   1. 安装Maven(配置Maven环境变量+Eclipse中的Maven插件) 这步就不多说了，网上一搜一大...
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 w
肖肖的博客
10-30 2603
/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./src/views/404.vue 4:14-446 13:3-17:5 14:22-454 @ ./src/views/404.vue @ ./src/router/index.js @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/clie
Vue学习：webpack-dev-server和nginx问答
热门推荐
百锦再的博客
04-22 7万+
这在大多数情况下是可行的，但如果你的后端服务器对请求的 Origin 属性有严格的检查，或者你需要代理到不同的域，那么你就需要设置 changeOrigin 为 true。当 changeOrigin 设置为 true 时，如果原始请求中的 Origin 是 http://localhost:8080，那么在代理请求中，Origin 会被修改为 https://api.example.com。需要注意的是，pathRewrite 的配置应该根据你的实际后端API路径和你想要的前端请求路径来设置。
详解webpack-dev-server的简单使用
08-27
* 在 webpack.config.js 中添加 devServer:{inline:true} 2. 当以 Node.js API 启动 Webpack-dev-server 时，我们也需要做两点： * 由于 Webpack-dev-server 的配置中无 inline 选项，我们需要添加 webpack-dev-...
webpack-dev-server-grief:复制我在 webpack-dev-server api 中遇到的问题
07-05
尝试将 webpack-dev-server api 与 gulp 一起使用时出错。 这个 webpack 配置似乎配置正确，因为运行 CLI webpack-dev-server是...[10:35:59] [webpack-dev-server] http://localhost:8080/index.html /home/vincent/w
localhost:8080/hello返回Whitelabel Error Page问题处理
java_s_firend的博客
01-09 2832
近日问题整理（week001）
webpack npm的dev,run,start区别.zip
12-11
webpack npm的dev,run,start区别.zip 大家都听说过webpack,比如著名的VUE就是使用的它来打包 那npm dev,run start有何区别呢?
前端npm项目启动报错：error:0308010C:digital envelope routines::unsupported
qq_37759895的博客
04-29 675
刚刚开通了一个公众号，会分享一些技术博客和自己觉得比较好的项目，同时会更新一些自己使用的工具和图书资料，后面会整理一些面试资料进行分享，觉得有兴趣的可以关注一下。
报错digital envelope routines::unsupported 404s will fallback to /index.html
weixin_46517461的博客
07-11 446
我是node升级到18出现了问题，将node删除后，下载16版本即可，我的是16.13.2是没问题的，digital envelope routines::unsupported是因为版本太新导致的。可以参考这个https://blog.csdn.net/fengyuyeguirenenen/article/details/128319228。
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
weixin_42442651的博客
06-04 1404
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下一、首先修改config目录下的index.js文件将其中build的配置项assetsPublicPath进行修改，改为目的是将资...
ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'F:\demo\t
LPLIFE的博客
06-11 2万+
解决这个问题请跳到第六步 下面是比较完整的简单打包： 一.确保已经安装了nodeJS之后. 二. 创建webpack-demo,我的是f盘下的, 2.然后进入这个文件夹: 3.进行初始化,一路都是选择默认(回车就可以): 查看初始化后的文件夹,里面只有一个json文件: 4. 接下来装webpack npm install webpack --save-dev ...
Webpack dev server热加载失败的解决办法
甘焕的博客
05-10 9807
利用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 res
webpack-dev-server简单使用
高山上的鱼
02-09 5万+
1.webpack-dev-server配置1.1 ContentBasewebpack-dev-server会使用当前的路径作为请求的资源路径，但是你可以通过指定content base来修改这个默认行为:$ webpack-dev-server --content-base build/这样webpack-dev-server就会使用build目录下的文件来处理网络请求。他会监听资源文件，当他们
本地访问地址localhost:8080/console/index
weixin_42220130的博客
12-13 5906
localhost:8080/console/index
* ./src/main.js in multi (webpack)-dev-server/client?http://127.0.0.1:8080 webpack/hot/dev-server ./src/main.js 终止批处理操作吗(Y/N)? y PS E:\job\job-97 全栈\mg\活动配置_jenkins_all\dev2> npm run dev > locus_test@1.0.0 dev E:\job\job-97 全栈\mg\活动配置_jenkins_all\dev2 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 94% asset optimization ERROR Failed to compile with 2 errors 10:44:34 This dependency was not found: * E:\job\job-97 全栈\mg\活动配置_jenkins_all\dev2\node_modules\webpack-dev-server\client\index.js?http://127.0.0.1:8080 in multi (webpack)-dev-server/client?http://127.0.0.1:8080 webpack/hot/dev-server ./src/main.js To install it, you can run: npm install --save E:\job\job-97 全栈\mg\活动配置_jenkins_all\dev2\node_modules\webpack-dev-server\client\index.js?http://127.0.0.1:8080 This relative module was not found: * ./src/main.js in multi (webpack)-dev-server/client?http://127.0.0.1:8080 webpack/hot/dev-server ./src/main.js
最新发布
09-12
你仍然遇到以下两个关键错误： ``` This dependency was not found: * E:\...\node_modules\webpack-dev-server\client\index.js?http://127.0.0.1:8080 This relative module was not found: * ./src/main.js ``` 这说明你仍未解决以下两个关键问题： --- ## 🔥 问题 1：`./src/main.js` 文件不存在或路径错误 Webpack 配置中引用了入口文件 `./src/main.js`，但该文件不存在或路径配置错误。 ### ✅ 解决方法： 请确保你的项目结构如下： ``` E:\job\job-97 全栈\mg\活动配置_jenkins_all\dev2 └── src/ └── main.js ``` 如果没有，请手动创建 `src/main.js` 文件，内容可以是： ```js // src/main.js console.log('Webpack entry file loaded.'); ``` --- ## 🔥 问题 2：`webpack-dev-server` 路径解析错误 这个错误： ``` E:\...\node_modules\webpack-dev-server\client\index.js?http://127.0.0.1:8080 ``` 说明 Webpack 正在尝试加载 `webpack-dev-server/client` 模块，但路径解析失败。这通常是由于以下原因： - `webpack-dev-server` 没有正确安装 - Webpack 配置中 `entry` 写法错误 - Webpack Dev Server 版本与 Webpack 不兼容 --- ## ✅ 完整解决方案 ### ✅ 步骤 1：确认 `webpack-dev-server` 是否已安装 运行以下命令安装： ```bash npm install --save-dev webpack-dev-server ``` --- ### ✅ 步骤 2：检查 Webpack 配置文件 `build/webpack.dev.conf.js` 确保 `entry` 写法如下： ```js entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/main.js' ], ``` 或者使用对象形式： ```js entry: { app: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/main.js' ] } ``` --- ### ✅ 步骤 3：清理缓存和依赖 运行以下命令： ```bash # 删除 node_modules 和 lock 文件 rm -rf node_modules package-lock.json # 重新安装依赖 npm install ``` > ⚠️ 注意：Windows 下 `rm -rf` 可能无法使用，你可以手动删除文件夹或使用： ```bash rmdir /s /q node_modules del package-lock.json npm install ``` --- ### ✅ 步骤 4：尝试使用 `webpack serve` 启动（推荐新版本） 如果你使用的是 Webpack 5 和 Webpack Dev Server 4+，推荐使用： ```bash npx webpack serve --config build/webpack.dev.conf.js ``` 而不是旧的： ```bash webpack-dev-server --config build/webpack.dev.conf.js ``` --- ## ✅ 验证是否成功 创建 `src/main.js` 文件后重新运行： ```bash npm run dev ``` 如果看到 Webpack 成功编译，并启动本地服务器，说明问题已解决。 --- ## ✅ 总结对比 | 问题 | 原因 | 解决方式 | |------|------|----------| | 找不到 `main.js` | 文件缺失或路径错误 | 创建文件或修正路径 | | 找不到 `webpack-dev-server/client` | 模块未安装或配置错误 | 安装模块并检查 entry 配置 | | 缓存问题 | node_modules 损坏 | 清理并重新安装 | | 启动命令错误 | 使用了旧版命令 | 改用 `webpack serve` | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值