webpack-dev-server 有什么用？ 如何配置

webpack-dev-server 有什么用？ 如何配置

webpack-dev-server是一个小型的express服务器，使用它可以为webpack生成的资源文件提供web服务；

主要功能：

先安装好

npm i webpack-dev-server

第一：webpack-dev--server可以用来生成localhost:8080在线地址的网站，生成站点域名；

直接运行命令

webpack-dev-server //通过这个地址可以直接访问（但是地址地址栏有尾巴，并且内容区域顶部有内容）

或者通过这个来指定路径，去掉尾部和url不优雅的地方

--contentbase src 指定路径（监控src内容的变化，src下放的是bundle.js）

--inline 把webpack-dev-server之前默认的iframe默认修改成inlinie模式，这样页面就不会有多余的内容了；

webpack-dev-server --contentbase src --inline

第二：webpack热更新，功能是在页面内容发生变化后会自动刷新页面；

webpack-dev-server --contentbase src --inline --hot

补充

补充：常用 devServer 配置项速记：

• hot: true：开启 HMR（默认 webpack-dev-server v4+ 已内置 HMR 客户端，无需手动配）。
• port、host、open（自动打开浏览器）、https。
• historyApiFallback: true：SPA 路由 404 时回退到 index.html（Vue Router / React Router 必开）。
• client: { overlay: { errors: true, warnings: false } }：编译错误时浏览器蒙层提示。
• static: { directory: path.join(__dirname, 'public') }（v4 替代 v3 的 contentBase）：额外的静态资源目录。
• proxy: { '/api': { target: '...' } }：代理 API。
• headers：自定义响应头（如 Access-Control-Allow-Origin: *）。

来源整理自：我的有道云笔记