Webpack 的 devServer 是如何工作的？如何配置代理？

推荐答案

Webpack 的 devServer 工作原理

Webpack 的 devServer 是一个基于 Node.js 和 Express 的小型服务器，用于在开发环境中提供实时重新加载（Live Reloading）和热模块替换（Hot Module Replacement, HMR）功能。它通过监听文件系统的变化，自动重新编译并刷新浏览器页面，从而提升开发效率。

配置代理

在 webpack.config.js 中，可以通过 devServer.proxy 配置代理，将 API 请求转发到后端服务器。以下是一个简单的代理配置示例：

// www.javascriptcn.com code example
module.exports = {
  // 其他配置...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标服务器地址
        changeOrigin: true, // 修改请求头中的 Origin 为目标服务器地址
        pathRewrite: { '^/api': '' }, // 重写路径，去掉 /api 前缀
      },
    },
  },
};

本题详细解读

devServer 的工作原理

1. 启动服务器：devServer 启动一个本地服务器，默认监听 localhost:8080。
2. 文件监听：devServer 会监听项目中的文件变化，当文件发生变化时，自动触发重新编译。
3. 实时刷新：编译完成后，devServer 会通过 WebSocket 向浏览器发送消息，触发页面刷新。
4. 热模块替换：如果启用了 HMR，devServer 会只替换发生变化的模块，而不是刷新整个页面。

代理配置详解

1. target：指定目标服务器的地址，所有匹配的请求都会被转发到这个地址。
2. changeOrigin：如果设置为 true，请求头中的 Origin 字段会被修改为目标服务器的地址，用于解决跨域问题。
3. pathRewrite：用于重写请求路径，例如去掉前缀或替换路径中的某部分。

通过合理配置 devServer 和代理，可以极大提升开发效率，并解决开发环境中的跨域问题。