复习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修改配置。

转载于:https://juejin.im/post/5ce28721e51d45108e0dd644