如何在webpack-dev-server中自定义路由并访问webpack compiler实例

核心思路 #

利用webpack-dev-server 4.x+提供的setupMiddlewares配置项，扩展自定义中间件并直接获取compiler实例，在自定义路由中实现手动更新文件+触发编译的逻辑。

具体实现步骤 #

1. 修改webpack配置文件
   在webpack.config.js的devServer字段中添加setupMiddlewares配置，通过该钩子获取devServer实例及对应的compiler：

module.exports = {
  // 其他webpack配置（entry、output等）
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // 直接获取webpack compiler实例
      const compiler = devServer.compiler;

      // 添加自定义POST路由，用于触发pkg代码更新
      devServer.app.post('/update-pkg', async (req, res) => {
        try {
          // 获取webpack输入文件系统实例
          const fs = compiler.inputFileSystem;
          // 定位node_modules中目标pkg的文件路径
          const targetFile = require.resolve('pkg/dist/index.js');
          // 读取本地修改后的pkg代码内容（替换为你的本地文件路径）
          const updatedContent = fs.readFileSync('/your/local/pkg/dist/index.js', 'utf8');

          // 写入更新后的内容到webpack的输入文件系统
          await new Promise((resolve, reject) => {
            fs.writeFile(targetFile, updatedContent, (err) => {
              err ? reject(err) : resolve();
            });
          });

          // 主动触发webpack重新编译
          await new Promise((resolve, reject) => {
            compiler.run((err, stats) => {
              err ? reject(err) : resolve(stats);
            });
          });

          res.json({ success: true, msg: 'pkg代码已更新并完成编译' });
        } catch (err) {
          res.status(500).json({ success: false, msg: err.message });
        }
      });

      // 保留原有中间件
      return middlewares;
    }
  }
};

2. 调用自定义路由触发更新
   启动webpack-dev-server后，通过POST请求访问http://localhost:端口/update-pkg即可手动触发pkg代码的更新与编译。

关键注意事项 #

• 路径准确性：确保require.resolve('pkg/dist/index.js')能正确定位到node_modules中pkg的目标文件，/your/local/pkg/dist/index.js替换为你本地修改后的pkg文件路径。
• 异步逻辑处理：文件读写和编译操作都是异步的，建议用async/await包裹Promise，避免回调嵌套导致的逻辑混乱。
• 替代方案参考：如果pkg是你本地开发的依赖，更推荐用npm link将本地pkg链接到项目，或在webpack配置中设置resolve.alias直接指向本地pkg源码目录，让webpack自动监听文件变化，无需手动触发更新。

内容的提问来源于stack exchange，提问作者chikadance