04-搭建本地服务器

1. 为什么要搭建本地服务器

目前我们开发的代码，运行方式

• npm run build，打包代码，直接双击运行
• 通过live server或者直接通过浏览器，打开index.html代码

这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示

2. webpack-dev-server

webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中

• 说白了，就是在内存中打包，使用了一个库叫memfs（memory-fs webpack自己写的）
• 安装本地开发服务器，安装：npm install webpack-dev-server -D

两个配置

• 在webpack.config.js中配置devServer
• 在package.json中配置serve命令

host设置主机地址

• 默认值是localhost
• localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
• 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;

port、open、compress

• port设置监听的端口，默认情况下是8080
• open是否打开浏览器，默认值是false，设置为true会打开浏览器；
• compress是否为静态文件开启gzip compression，默认值是false，可以设置为true；

3. Proxy（后面回头学习）

proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：

• 比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这个时候发送网络请求就会出现跨域的问题；
• 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨域问题了；

常见配置

• target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment；
• pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
• secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
• changeOrigin：它表示是否更新代理后请求的headers中host地址；

4. historyApiFallback（后面回头学习）

historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误

• boolean值：默认是false，如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容；
• object类型的值，可以配置rewrites属性，可以配置from来匹配路径，决定要跳转到哪一个页面；

事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的

5. 区分开发环境

目前所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js

• 当配置越来越多时，这个文件会变得越来越不容易维护
• 并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的
• 最好对配置进行划分，方便我们维护和管理；

如何区分

• 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可
• 方式二：使用相同的一个入口配置文件，通过设置参数来区分它们；

创建三个文件：

• webpack.comm.conf.js
• webpack.dev.conf.js
• webpack.prod.conf.js