跳到主要内容

认识

2024年11月23日
柏拉文
越努力，越幸运

一、认识​

devServer 是 Webpack 提供的开发服务器配置选项，用于提升开发效率。通过使用 webpack-dev-server，开发者可以在本地搭建一个简单的 HTTP 服务器，提供热更新（HMR）、文件监听、实时刷新等功能，从而减少开发中的手动刷新和重复构建的时间。devServer 的核心功能

  1. 实时预览：自动监听文件变更并刷新浏览器。

  2. 热模块替换（HMR）：只更新修改的模块，避免全页面刷新。

  3. 代理（Proxy）：方便处理 API 请求的跨域问题。

  4. 本地资源服务：提供静态资源的本地服务。

  5. 历史记录路由支持：支持 SPA 路由的重定向到 index.html。

二、准备​

2.1 安装依赖​

pnpm add webpack-dev-server -D

2.2 配置脚本​

"scripts": {
  "start": "webpack serve --mode development"
}

三、配置​

devServer: {
    port: 9000,
    compress: true,
    client: {
      progress: true,
    },
    static: {
      directory: Path.resolve(process.cwd(), "public"),
    },
}