每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

概念

DevServer 是 webpack 提供的开发服务器，它能够为前端开发提供快速的热更新开发环境。它提供以下核心功能：

• 提供本地开发服务器
• 支持模块热替换(HMR)
• 自动刷新浏览器
• 代理 API 请求
• 提供静态文件服务

安装

npm install webpack-dev-server --save-dev

基础配置

webpack.config.js

const path = require("path");

module.exports = {
  devServer: {
    // 指定DevServer提供静态文件的目录
    // 该目录应该与 Webpack 配置中的 output.path 一致
    contentBase: path.join(__dirname, "dist"),
    compress: true, // 启用gzip压缩
    port: 9000, // 指定DevServer监听的端口号
    hot: true, // 启用热模块替换
    open: true, // 自动打开浏览器连接开发环境
    liveReload: true, // 是否实时重新加载、刷新页面
    // 解决跨域问题
    proxy: {
      "/api": {
        target: "http://localhost:8080", // 目标服务器
        pathRewrite: { "^/api": "" }, // 重写路径，将 /api 替换掉
        changeOrigin: true, // 修改请求的 Origin 为目标服务器的 Origin
        secure: false, // 如果目标服务器使用 HTTPS，需要设置为 false
      },
      "/ws": {
        target: "ws://localhost:8080", // 目标服务器
        ws: true, // 启用 WebSocket 代理
      },
    },
  },
};

在上述配置中：

• contentBase 选项指定了 DevServer 提供静态文件的目录，可以是一个绝对路径或相对路径；
• compress 选项启用了 gzip 压缩，可以减小传输文件的大小；
• port 选项指定了 DevServer 监听的端口号；
• hot 选项启用了热模块替换，它会在代码修改后自动更新页面而不刷新整个页面；
• open 选项启动 DevServer 时会自动打开默认浏览器。
• proxy 选项配置代理，用于解决开发环境的跨域请求。
• liveReload 实时重新加载或刷新页面，默认值为 true，可以忽略。

运行指令

npx webpack serve

注意运行指令发生了变化

并且当你使用开发服务器时，所有代码都会在内存中编译打包，如果没配置持久化缓存，构建产物并不会输出到 dist 目录下。

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

高级选项

自定义中间件

使用 before 或 after 添加自定义中间件：

devServer: {
  before: function(app, server) {
    app.get('/some/path', function(req, res) {
      res.json({ custom: 'response' });
    });
  }
}

overlay

当出现编译错误或警告时，在浏览器中显示全屏覆盖。

module.exports = {
  devServer: {
    client: {
      overlay: true,
      // 或者
      overlay: {
        errors: true, // 显示编译错误信息
        warnings: false, // 忽略编译警告
      },
    },
  },
};

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24