一、devServer

1.1 概念：

开发服务器，启动一个本地的服务器端口，将自动打包的代码放入内存中，访问本地的端口，可以返回一个html内容

1.2 作用：

修改了源代码 -> 直接看到最新代码，经过webpack编译之后的执行的效果，放入内存中 -> 开启本地服务器端口，访问本地服务 -> 返回一个html页面
image.png

1.3 配置：

  1. devServer: { contentBase: './dist' }:

开启一个服务，访问端口返回的 内容为：contentBase: 'xxx' 根路径 配置的文件
image.png

  1. devServer: { open: true }:

第一次编译完成之后，打开页面（默认浏览器）

  1. port: 3000:

表示本地服务器运行端口的配置

  1. webpack --watch ：

表示**webpack**监听源代码的变化，源代码发生变化，则**webpack**重新进行打包

1.3.1 配置本地服务器代理方式（请求转发）：

像本地服务器发送请求，本地服务器进行请求转发，从而解决跨域问题
proxy.changeOrigin:
表示 改变请求的源地址，请求报文中的origin信息
image.png

  1. pathRewrite: { '/api': '' }

表示：所有以api开头的路径请求将api路径替换为‘’

  1. pathRewrite: { '^/api': '' }

^表示路径api之前的包括api路径参数都给替换掉为：''

  1. https加密请求处理：

如果请求转发的服务器是https文本传输加密协议，需配置secure: false配置项
image.png