配置Webpack Dev Server 解决手动执行webpack 或 yarn build 命令繁琐操作

本文摘要：配置 Webpack Dev Server 可以解决本地开发前端应用时，手动执行 webpack 命令或 yarn build 命令，再去浏览器中访问 dist/index.html 的麻烦耗时操作，可有效简化流程。本文实战演练配置 Webpack Dev Server 的方法与步骤。

作者：程序员优雅哥
链接：https://juejin.cn/post/7125769527224172580/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。本文实战演练配置 Webpack Dev Server 的方法与步骤。

在本地开发前端应用时，每次都手动执行 webpack 命令或 yarn build 命令，再去浏览器中访问 dist/index.html 是一件非常麻烦耗时的事情，可以通过配置 Webpack Dev Server 来解决这个问题。实际上 vue-cli 中也配置了 Webpack Dev Server，每次启动 Vue 应用的命令 yarn serve，本质上就是启动 Webpack Dev Server。

webpack-dev-server 官网地址：https://webpack.js.org/configuration/dev-server/

1 安装依赖

由于我们使用的 webpack 版本是当前最新的5.73.0、 webpack-cli 版本是4.9.2， webpack-dev-server 的版本也要使用最新