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

原创

已于 2022-07-29 20:29:55 修改 · 845 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript #vue

于 2022-07-29 20:20:45 首次发布

本文详细介绍了如何配置Webpack Dev Server，避免手动执行webpack命令，简化前端开发流程。通过配置devServer，实现热模块替换(HMR)和devtool以进行源码映射，提高开发效率。

本文摘要：配置 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/