从头开始：通过 chokidar 实现文件变更自动重启 Webpack 开发服务器代理地址

2023-09-05 01:28:21

在进行开发时，我们需要一个可靠的 Webpack 开发服务器 (WDS) 来为应用程序提供实时更新。然而，有时 WDS 可能不会自动重启，即使我们更改了代理地址。为了解决这个问题，我们可以使用 chokidar，这是一个用于监视文件系统更改的 Node.js 库。

在本指南中，我们将深入探讨如何通过 chokidar 实现文件变更自动重启 Webpack 开发服务器代理地址。我们将逐步进行，确保你可以轻松地将此技术应用到你的项目中。

步骤 1：安装依赖项

首先，在你的项目中安装 chokidar 和 webpack-dev-server：

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

步骤 2：配置 chokidar

创建或编辑你的 webpack 配置文件（通常称为 webpack.config.js）。在该文件中，找到 WDS 配置部分。它可能如下所示：

devServer: {
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

在此配置中，我们将通过添加 chokidar 来扩展 WDS 代理配置，如下所示：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      bypass: function(req, res, proxyOptions) {
        if (req.headers['x-forwarded-host']) {
          delete req.headers['x-forwarded-host'];
        }
        req.headers['host'] = 'localhost:3000';
      }
    }
  },
  watchOptions: {
    ignored: '/node_modules/',
    aggregateTimeout: 300,
    poll: 1000
  }
}