Webpack Dev Server

1、概述

        Webpack Dev Server 是 Webpack 提供的一个开发辅助工具，主要功能是通过本地服务器实时刷新页面。

        1、核心功能：

• 自动打包与页面热更新：当代码发生变化时，Webpack Dev Server 能够自动重新打包并刷新浏览器。
• 实时预览：允许开发者在本地搭建一个 Web 服务，并实时查看开发进展。
• 模块热替换(HMR)：通过 HMR，代码更新可以直接应用到页面上，而无需刷新整个页面。

        2、工作原理： 

                Webpack Dev Server本质上是提供了一个简单的HTTP服务，同时具有部分WebSocket功能，用于监听当代码发生变化时通知浏览器刷新页面；它利用webpack打包能力，在内存中生成打包文件，相较于打包到本地，可显著提升打包速度。

2、基本配置

        1、执行 npm install webpack-dev-server -D 安装插件

        2、可以在package.json文件中直接配置

        2、在项目中的 webpack.config.js文件中添加配置

        执行 npm run serve 启动项目服务

        3、在项目package.json文件中配置           

        执行 npm start 启动项目服务

3、高级配置

        1、配置代理(Proxy)

        Webpack Dev Server 提供了 proxy 配置，允许将特定路径的请求转发到其他服务器。

        在 webpack.config.js 文件中 devServer 中配置 proxy

        2、自定义响应头

        在 webpack.config.js文件中的 devServer 中配置 headers，这样可以为每一个响应统一添加一个自定义的响应头 x-Custom-Foo

        3、配置HTTPS

        在 webpack.config.js文件中的 devServer 中配置 https

        也可以通过本地的SSL证书和密钥来自定义HTTPS设置：

        4、压缩与优化

        Webpack Dev Server 默认对生成的文件进行 Gzip 压缩，可通过 webpack.config.js文件中devServer 中的 compress 属性来开启或关闭此功能。

4、模块热替换(HMR)

        模块热替换(HMR)是 webpack 提供的最有用的功能之一。它能帮助在运行时不完全刷新页面的情况下更新所有类型的模块。此模式之下，可以极大的提升开发效率，尤其在样式、状态等不会影响全局应用的局部调整时。HMR就像事件冒泡一样，会从最里层的依赖一层一层向上触发。路径上所有依赖都会触发更新状态直到更新到浏览器上

        警告  HMR 不适用于生产环境，而应当用于开发环境。

        从V4.0版本开始，模块热更新功能默认开启的，也可通过 webpack.config.js文件中 devServer 中的 hot 属性来开启或关闭此功能。

        或者

        某些情况下还需要在入口文件中引入 Webpack 的 HMR API。

5、注意事项

        1、开发环境与生产环境的区分

                Webpack Dev Server 适合在开发环境使用。在生产环境中通常会使用 nginx 或其他的 web服务器来托管打包文件。

        2、确保安全性

                在开发过程中，要确保设置的代理、HTTPS或自定义响应头不会一如安全隐患

        3、定制化配置灵活