2-4. 开发服务器

在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

1. 编写代码
2. 控制台运行命令完成打包
3. 打开页面查看效果
4. 继续编写代码，回到步骤2

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境
为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server
它既不是plugin也不是loader
先来看看它怎么用

1. 安装
2. 执行webpack-dev-server命令

webpack-dev-server命令几乎支持所有的webpack命令参数，如--config、-env等等，你可以把它当作webpack命令使用
这个命令是专门为开发阶段服务的，真正部署的时候还是得使用webpack命令
当我们执行webpack-dev-server命令后，它做了以下操作：

1. 内部执行webpack命令，传递命令参数
2. 开启watch
3. 注册hooks：类似于plugin，webpack-dev-server会向webpack中注册一些钩子函数，主要功能如下：
   1. 将资源列表（aseets）保存起来
   2. 禁止webpack输出文件
4. 用express开启一个服务器，监听某个端口（8080），当请求到达后，根据请求的路径，给予相应的资源内容

配置
针对webpack-dev-server的配置，参考：https://www.webpackjs.com/configuration/dev-server/
常见配置有：

• port：配置监听端口
• proxy：配置代理，常用于跨域访问
• stats：配置控制台输出内容

网站：
http://localhost:8080/index.html

proxy：例子1：
前端页面和js开发完成后，往往会部署到同一个域中
后台的服务器域：http://duyi.com
前端开发完成后放到服务器的域：http://duyi.com，所以只有开发后才有跨域问题，而且地址写死不灵活，所以这么改写：
webpack.config：

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        port: 8000,
        open: true,
        proxy: { //代理规则
            "/api": {
                target: "http://open.duyiedu.com",
                changeOrigin: true //更改请求头中的host和origin
            }
        }
    },
    stats: {
        modules: false, //显示的少了很多
        colors: true
    }
}

index.js:

const url = `/api/student/findAll?appkey=demo13_1545210570249`;
fetch(url).then(resp => resp.json()).then(resp => {
    console.log(resp)
})