我们经常使用脚手架,调用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时,将去除路径重新发送请求。