webpack本地服务器原理详解和相关配置及使用

我们经常使用脚手架，调用npm run server 或者dev便可以开启一个url打开我们所编写的页面，其实这就是webpack的本地服务器在生效。

在使用webpack中，我们将根据一些规则对代码进行打包，但一直打包到一个文件夹中，并且在显示到浏览器上这个过程速度慢，效率低，针对这个问题，我们只要开启一个本地服务器问题就会迎刃而解。

首先我们知道，文件时保存在硬盘中的，所以我们平时打包的文件也是在硬盘中，但是一旦我们开启了本地服务器，本地服务器将在内存被开启，打包文件也将不再保存在硬盘内，而是保存在内存里的本地服务器中，再通过本地服务器提供的url，便可以在浏览器中看到。

本地服务器需要安装webpack-dev-server插件，安装插件后通过npx webpack server的命令开启服务器。

webpack可以从入口文件打包所有依赖的文件，但是入口文件时js文件，而html文件引用的静态资源却无法被检索到，为了解决这个问题，devServer有一个配置为static，在其中写入需要打包的静态资源文件夹的名字即可

相关配置

 host配置：host配置默认为localhost，windows系统默认将localhots指向127.0.0.1，而127开头的ip地址是回环地址，数据发送到网络层时被自己捕获，不会继续传到链路层，也就是请求并不会发出去，而是被自己接受，一般开发阶段，使用自己电脑测试，localhost就可以。如果需要其他同网段电脑访问，我们则需要将其设置为0.0.0.0代表的是本机中所有的IP地址。监听0.0.0.0的端口，就是监听本机中所有IP的端口。然后再通过查看本机的ip地址就可以访问本机的本地服务器。

proxy代理服务器：客户端向服务器请求数据受同源策略影响，但服务器不受影响，项目上线时通常前后端都在一个服务器中部署，符合同源策略，但开发时，本地测试获取数据时却不行，这是需要代理服务器。

changeOrigin：通过webpack配置创建node代理服务器获取数据在返回给客户端，但此时请求头中的host依旧是客户端的host而非同源host，如果后端代码对其加一验证，即使使用代理服务器，依旧无法获取到资源，此时需要另一个配置，changOrign，这个配置将更改请求头中的host，达到欺骗后端代码的目的。

historyApiFallback：在项目中我们输入url时通常为www.xxx.com/home的方式，不会有任何问题，但如果不使用框架时，这样请求会出现404，这是因为原生不进行webpack相关配置时，前端将对整个url进行发送请求解析，而路径仅仅是前端改变页面的依据，不应该一起进行dns解析，而框架中配置了historyApiFallback，当返回为404时，将去除路径重新发送请求。