webpack-dev-server 【webpack服务器】

Webpack服务器是一个基于Node.js的开发服务器，可以帮助您在本地运行和调试Webpack项目。它提供了许多开发工具，例如： - 编译代码并实时重新加载 - 提供静态文件服务 - 提供代理服务 - 提供热更新功能 Webpack服务器的工作原理如下：

• 1、启动Webpack服务器时，它会读取Webpack配置文件（即webpack.config.js），并根据配置文件中的信息进行初始化。

• 2、Webpack服务器会监听源文件的变化，并在源文件发生变化时自动重新编译代码。

• 3、Webpack服务器会将编译后的代码保存在内存中，并提供静态文件服务。

• 4、Webpack服务器会自动打开浏览器，并跳转到默认的URL（通常是 http://localhost:8080）。用户可以在浏览器中访问该URL来查看应用程序的效果。 5. 当用户修改源文件时，Webpack服务器会自动重新编译代码，并在浏览器中实时刷新页面，以便用户查看代码更新后的实时效果

为什么本地使用 webpack 进行 dev 开发时，不需要服务器端配置 cors 的情况下访问到线上接口？

当你在本地通过 Ajax 或其他方式请求线上接口时，由于浏览器的同源策略，会出现跨域的问题。但是在服务器端并不会出现这个问题

• 通过webpack-dev-server来实现这个功能，当在浏览器中发送请求时，请求会先被 Webpack Dev Server 捕获，然后根据你的代理规则将请求转发到目标服务器

• 目标服务器返回的数据再经由 Webpack Dev Server 转发回浏览器

• 这样就绕过了浏览器的同源策略限制，使你能够在本地开发环境中访问线上接口

为什么本地访问localhost可以访问页面

在本地dev跑起来之后，可以通过localhost:端口号可以看到页面

• 这是webpack在开发环境内部启动了基于nodejs开发的服务器，提供了静态资源服务

• 可以通过 localhost:端口号 访问你的应用页面，同时也可以通过 localhost:端口号/webpack-dev-server 访问 webpack-dev-server 提供的静态资源服务，比如查看打包后的资源文件等