复习webpack4之DevServer实现请求转发与单页面路由

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不只仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.在开发过程当中请求接口

咱们正常在开发过程当中，确定会去请求接口，在先进的项目中，咱们一般使用axios来请求接口。(接口是假的，只是作例子)

这样项目中就会去进行get请求，拿到结果并打印。

2.实现请求转发

可是在实际开发中，开发环境和线上的接口域名每每是不同的，因此咱们一般会写成相对路径的形式。

只写成这种形式是确定不行的，须要借助devServer来实现请求转发。

重启服务后，会发现项目请求接口成功代理到了www.example.com这台服务器上。在浏览器network中，查看请求会发现，请求的地址依旧是localhost:9000，可是已经能够成功拿到返回值了。

3.其余应用

3.1 请求另外一个接口

若是开发过程当中，后端接口(/api/header.json)尚未开发好，如今有一个临时的mock接口(/api/demo.json)，也能够经过配置来实现这种需求。

这样咱们在开发时，直接请求正式接口地址，可是经过proxy作一层代理，实际取的是/api/demo.json中的数据，这样就避免了手动替换接口。

3.2 请求https接口

当咱们要请求https协议的接口时，要增长一个配置项。

3.3 bypass 拦截

这段代码的意思是，若是请求的是一个.html路径，那么就直接返回根路径下index.html中的内容。

若是改为return false，意思是若是请求的是一个.html路径，就跳过这条转发规则，不通过转发，直接返回内容。

3.4 根目录下的代理

若是想对接口根目录下进行代理，须要这样配置。

3.5 changeOrigin

有些网站会对origin作限制，致使咱们拿不到数据，因此咱们在写转发规则的时候，通常都会加这个配置。

实际proxy的配置项还有不少，好比设置请求头，设置cookie等等，等咱们再须要更多配置的时候，去查阅文档就能够了。

注：webpack devServer只在开发环境中生效，在线上时不会有任何效果。

4.单页面路由

咱们开发单页面应用的时候，配置完路由后，进入/list页面，有时候会遇到cannot GET /list状况，这是为何呢？由于服务器觉得咱们要访问后端list页面，因此就会提示咱们页面不存在，那么要怎么解决呢？

咱们要在devServer中配置一个配置项。

原理是配置完后，如今不管访问服务器的任何一个路径，都会把请求转换为对根路径的请求，即index.html

historyApiFallback还能够配置为一个对象。

意思是，若是访问abc.html，就代理到list.html。

当代码上线后，devServer就很差用了，因此须要后端小伙伴仿照historyApiFallback修改配置。