如何告诉Webpack开发服务器为任何路由提供index.html

reactjs React.js

番长神乐小小

2020-03-11

React Router允许React应用处理/arbitrary/route为了使其正常工作,我需要我的服务器在任何匹配的路由上发送React应用程序。

但是webpack开发服务器无法处理任意端点。

这里有一个使用附加快递服务器的解决方案。 如何允许webpack-dev-server允许来自react-router的入口点

但是我不想启动另一个Express服务器来允许路由匹配。我只想告诉webpack开发服务器匹配任何URL,并向我发送我的react应用。请。

第736篇《如何告诉Webpack开发服务器为任何路由提供index.html》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
TonyEvaL 2020.03.11

对我来说,我有点“。” 在我的路径中,例如,/orgs.csv所以我不得不把它放在我的webpack confg中。

devServer: {
  historyApiFallback: {
    disableDotRule: true,
  },
},
神离伊芙妮 2020.03.11

在配置中添加公共路径可帮助webpack理解真正的根(/),即使您在子路由上也是如此。/article/uuid

因此,修改您的webpack配置并添加以下内容:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

没有publicPath资源可能无法正确加载,只有index.html。

在Webpack上测试 4.6

配置的更大部分(只是为了获得更好的画面):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}
米亚逆天 2020.03.11

如果选择使用webpack-dev-server,则不应使用它来服务整个React应用程序。您应该使用它来服务bundle.js文件以及静态依赖项。在这种情况下,您将必须启动两台服务器,一台用于Node.js入口点,这些服务器实际上将处理路由并为HTML服务,另一台用于捆绑和静态资源。

如果您确实想要一台服务器,则必须停止使用webpack-dev-server并开始在应用程序服务器内使用webpack-dev-middleware它将“即时”处理包(我认为它支持缓存和热模块替换),并确保您的调用bundle.js始终是最新的。

乐米亚 2020.03.11

这样为我工作

devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true

},

在防暴应用程序上工作

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android