Webpack中使用DevServer

到目前为止 webpack 基本上可以正常使用了，但在实际开发中你可能会需要：

1. 提供 HTTP 服务而不是使用本地文件预览；
2. 监听文件的变化并自动刷新网页，做到实时预览；
3. 支持 Source Map，以方便调试。

对于这些， Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容，结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览

安装服务器依赖

xxxxxxxxxx
npm install -g webpack-dev-server@4.9.2
npm install --save-dev webpack-dev-server@4.9.2

修改配置文件

xxxxxxxxxx
const path = require('path');

module.exports = {
    devServer: {
        // 服务器打开目录
        static: path.join(__dirname, 'public'),
        // 开启压缩
        compress: true,
        // 设置端口
        port: 9000,
        // 热更新
        hot: true,
        // 自动打开浏览器
        open: true,
        //使用 History 路由模式时，若404错误时被替代为 index.html
        historyApiFallback: true
    }
};

服务器运行方式

1. webpack serve
2. webpack-dev-server

温馨提示

修改配置文件的情况下，是无法热更新的，需要重启服务器，热更新只对代码剩下 src

实时效果反馈

1. 在webpack服务器配置中，那个是设置端口配置的属性：

A hot

B open

C compress

D port

答案

1=>D