如何配置webpack dev server为请求自动添加末尾斜杠？

嘿，我完全懂你的需求——你要的是浏览器地址栏实实在在的重定向，而不是historyAPIFallback那种后台悄悄转发的操作对吧？之前我折腾这个需求的时候，也踩过historyAPIFallback的坑，后来发现用webpack-dev-server的自定义中间件就能完美解决。

核心思路 #

webpack-dev-server底层是基于Express搭建的，所以我们可以插入自定义的Express中间件，提前拦截请求：判断请求路径是不是没有末尾斜杠的目录请求，是的话就返回重定向响应，让浏览器自动跳转到带斜杠的路径。

Webpack 5+ 配置方案（推荐） #

从Webpack 5开始，官方推荐用setupMiddlewares来管理中间件顺序，把我们的重定向逻辑放在最前面，确保优先处理：

module.exports = {
  // 你的其他Webpack配置...
  devServer: {
    // 如果你之前用了historyApiFallback，可以保留，不冲突
    historyApiFallback: true,
    setupMiddlewares: (middlewares, devServer) => {
      // 把重定向中间件插入到所有内置中间件最前面
      middlewares.unshift((req, res, next) => {
        // 排除静态文件请求（比如.js/.css/.png这类带后缀的资源）
        const isFileRequest = /\.\w+$/.test(req.path);
        // 判断条件：不是文件请求、不是根路径、路径末尾没有斜杠
        if (!isFileRequest && req.path !== '/' && !req.path.endsWith('/')) {
          // 301是永久重定向，302是临时重定向，根据需求选
          res.redirect(301, req.path + '/');
          return;
        }
        // 不符合条件就往下走内置中间件
        next();
      });

      return middlewares;
    },
  },
};

Webpack 4 兼容方案 #

如果你还在用Webpack 4，没有setupMiddlewares选项，可以用before钩子来添加中间件：

module.exports = {
  // 你的其他Webpack配置...
  devServer: {
    before: (app) => {
      app.use((req, res, next) => {
        const isFileRequest = /\.\w+$/.test(req.path);
        if (!isFileRequest && req.path !== '/' && !req.path.endsWith('/')) {
          res.redirect(301, req.path + '/');
          return;
        }
        next();
      });
    },
  },
};

验证效果 #

启动dev server后，访问/my/project/root，你会看到浏览器地址栏自动变成/my/project/root/，同时正确加载对应的index.html——这就是你想要的重定向效果，而不是后台偷偷转发。

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