webpack - 如何让 webpack 开发服务器附加一个斜杠？

Question

我希望 webpack 开发服务器向所有还没有的资源请求附加一个尾部斜杠。

例如:
我的索引位于 /my/project/root/index.html我可以通过 webpack 开发服务器访问它
1. /my/project/root和
2. /my/project/root/ (注意这里的斜杠)

我希望对 1 的请求重定向到 2。

我已经尝试过 historyAPIFallback 选项，但是您可以提供给该选项的重写仅通过请求，它们不会更改 url。

是否可以使用 webpack 开发服务器重定向请求？

Answer 1

你可以利用 webpack 的 devServer.historyApiFallback和 connect-history-api-fallback添加尾部斜杠。
webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }],
    },
  },
};

在哪里

rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }]

表示在任何没有斜杠的 url 后附加一个斜杠。
另外，具有以下属性的上下文对象:

parsedUrl: Information about the URL as provided by the URL module's url.parse.
match: An Array of matched results as provided by String.match(...).
request: The HTTP request object.

注意:上面的答案可能会抛出 CANNOT GET <URL>如果您的 webpack.output.publicPath 出现网页错误是 auto或 / .在这种情况下，只需执行以下操作:

rewrites: [{ from: /^.*[^/]$/, to: '/' }]