一、为什么要搭建本地服务器？
目前我们开发的代码，为了运行需要两个操作：
· npm run build ，编译相关的代码；
· 通过 live server 或直接通过浏览器，打开index.html代码，查看效果。
这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成 编译和展示。
二、为了完成自动编译，webpack提供了几种可选的方式：
1. webpack watch mode：
再该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译。（不需要手动运行 npm run build）
使用：
① 在导出的配置中，添加watch：true；
② 在启动webpack的命令中，添加 --watch 标识。
2. webpack-dev-server（常用）；
安装：npm install webpack-dev-server -D
① 修改配置文件（通知dev-serve从什么地方开始查找文件）：
终端运行：npm run server（打包到缓存中）
② devServer - static（打包后找不到的文件从指定路径加载）
②.1 webpack.config.js配置：
devServer: {
static: "./public"
},
③ devServer - hot（模块热替换HMR）：应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面。
HMR原理：
· webpack-dev-serve会创建两个服务：提供静态资源服务（express）和Socket服务（net.Socket）；
· express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）。
④ devServer - host（设置主机地址）：默认是localhost；如果希望其他地方也可以访问，可以设置为0.0.0；
localhost 本质上是一个域名，通常情况下会被解析为127.0.0.1；
⑤ devServer - port（修改端口号）
⑥ devServer - open（是否自动打开）
⑦ devServer - compress（是否压缩）
3. Proxy：是我们开发中非常常用的一个配置选项，他的目的是设置代理来解决跨域访问的问题。
比如我们的api请求是http://localhost:8888，但是本地启动服务器的的域名是http://localhost:8000，这个时候发送网络请求就会出现跨域的问题；
那么我们可以将请求先发送到一个代理服务器，代理服务器和Api服务器没有跨域的问题，就可以解决我们的跨域问题了。
安装：npm install axios
导入：import axios from 'axios'
使用：
配置：
proxy: { // 代理
"/api": {
target: "https://fxapi.boss.i-town.cn",//代理地址
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": "/" // 将api重写为空，否则会在地址上拼接
},
secure: false, // 将不接受在https上运行切证书无效的后端服务器，如果需要，就修改为false
}
}
3. webpack-dev-middleware；
三、resolve模块解析
用于设置模块被如何解析：resolve可以帮助webpack从每个require/import语句中，找到需要引入的合适代码模块；webpack使用 enhanced-resolve 来解析文件路径。
resolve: { // 模块解析
extensions: [".wasm", ".mjs", ".js", ".json", ".vue"], // 文件扩展名 默认是 [".wasm", ".mjs", ".js", ".json"]
mainFiles: ["index"], // 配置文件名 默认是index
alias: {
"js": path.resolve(__dirname, "./src/js"),
"@": path.resolve(__dirname, "./src")
}, // 路径别名
},
四、区分开发环境和生产环境
1. 创建 config文件夹，包含 公共配置、开发配置、生产配置文件。
2. 在package.json中配置打包加载文件（生产配置文件）和开发加载文件（开发配置文件）。
3. 合并公共配置
3.1 安装插件：npm install webpack-merge -D
3.2 导入合并插件：const { merge } = require('webpack-merge')
3.3 导入公共配置文件：const commonConfig = require('./webpack.comm.config')
3.4 使用merge合并： module.exports = merge(commonConfig,{ 私有配置 })
