如何配置webpack-dev-server实现根路径代理至localhost:5474？

我之前也碰到过一模一样的情况——想把webpack-dev-server的根路径请求全量代理到后端服务，但设置完context: () => true和index: ''后反而弹出目录列表，完全没触发代理。问题出在index的配置和请求优先级上，下面给你一个经过验证的正确配置：

正确的devServer代理配置 #

直接把这段配置加到你的webpack配置文件里：

module.exports = {
  // ... 其他webpack配置（entry、output等）
  devServer: {
    port: 3037,
    proxy: {
      '/': {
        target: 'http://localhost:5474',
        context: () => true,
        changeOrigin: true,
        secure: false,
        index: false, // 关键：告诉devServer不要查找index文件，直接转发请求
        bypass: (req, res, proxyOptions) => {
          // 仅当请求是HTML页面时才代理，静态资源让devServer自己处理
          if (req.headers.accept.indexOf('html') === -1) {
            return '/';
          }
        }
      }
    },
    directoryListing: false // 强制关闭目录列表功能，避免干扰
  }
};

为什么之前的配置不生效？ #

你之前设置index: ''会让webpack-dev-server认为没有默认入口文件，于是自动返回目录列表，而不是把请求转发给代理。换成index: false才是正确的做法——它会告诉devServer：“不要尝试找任何index文件，直接把请求交给代理处理”。

另外，bypass函数是用来区分静态资源请求和后端页面/接口请求的：

• 比如你的打包产物（.js、.css、图片等），还是让devServer自己处理，避免把这些请求也转发到后端；
• 如果你的后端服务本身也托管静态资源，可以直接删掉bypass配置，让所有请求都走代理。

额外注意事项 #

• changeOrigin: true必须加：它会修改请求的Host头，避免后端服务因为跨域Origin拒绝请求；
• secure: false适合后端是HTTP服务的场景，如果后端是HTTPS，把这个去掉即可；
• 配置完一定要重启webpack-dev-server，否则新配置不会生效。

现在再访问http://localhost:3037/，应该就能直接看到后端服务返回的内容了，再也不会出现目录列表啦！

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