本文共 1102 字，大约阅读时间需要 3 分钟。
用途:实现浏览器自动刷新来显示结果
dev-server是一个可选的本地开发服务器，基于node.js创建，内部使用express框架。Express框架可以服务于某个文件夹，会一直监听其中的代码是否改变。一旦改变会对所有改变的代码重新编译，编译后的代码会由express生成一些新的东西先放入内存，不会映射入盘，不会有任何输出；发布时npm run build才会添加到盘。
服务器读取文件时，存在于盘中的文件，读取速度远远小于内存中的文件。
安装
在终端输入指令：npm i webpack-dev-server -D
为了确保与其他插件兼容，建议指定版本，不推荐使用极高版本，否则可能出现与webpack-cli不兼容的问题。
配置 在Webpack配置文件（webpack.config.js）中添加devServer对象进行配置，对象内可设置以下属性：| 属性 | 作用 |
|---|---|
| contentBase | 指定为哪个文件夹提供服务，默认为webpack.config.js所在的根文件夹。 |
| port | 自定义服务器端口号，默认为8080。 |
| inline | 布尔值，表示是否启用实时监听模式，页面自动刷新。 |
| historyApiFallback | 在SPA页面中启用HTML5 history模式的前置。 |
| compress | 布尔值，启用Gzip压缩，减小文件体积并加快加载速度。 |
示例配置：
mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000 在VSCode中，您可以在终端执行：
webpack-dev-server(更高版本使用npx webpack-dev-server或npx webpack serve)
在package.json中添加脚本：
"dev": "webpack-dev-server --open"
这样启动服务时会自动打开浏览器。如需独立浏览器控制，去掉--open选项，使用：
npm run dev
通过本文，您学会了WebPack-dev-server的核心知识点。本文内容结合Vue教程和Webpack5.0.0教程整合而成，旨在帮助开发者快速掌握cli工具的使用要点。
如觉得文章实用，请点击右上角的赞赏XD
转载地址：http://lhakk.baihongyu.com/