如何告诉webpack dev服务器为任何路由提供index.html

React路由器允许反应应用程序处理/arbitrary/route 。 为了这个工作,我需要我的服务器发送任何匹配路线上的React应用程序。

但是webpack dev服务器不处理任意的端点。

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

但我不想启动另一个快速服务器来允许路由匹配。 我只是想告诉webpack开发服务器匹配任何url,并发送给我我的反应的应用程序。 请。

我发现最简单的解决scheme包括一个小configuration:

  devServer: { port: 3000, historyApiFallback: { index: 'index.html' } } 

我通过访问发现了这个: http : //jaketrent.com/post/pushstate-webpack-dev-server/

webpack-dev-server官方文档中的historyApiFallback选项清楚地说明了如何通过使用来实现

 historyApiFallback: true 

当找不到路由时,它简单地回退到index.html

要么

 // output.publicPath: '/foo-app/' historyApiFallback: { index: '/foo-app/' } 

为我这样工作

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

工作在防暴应用程序

我的情况有点不同,因为我在运行ng eject命令之后使用带有webpack的angular CLI和“eject”选项。 我修改了package.json中'npm start'popup的npm脚本来传递–history-api-fallback标志

“开始”:“webpack-dev-server –port = 4200 –history-api-fallback

 "scripts": { "ng": "ng", "start": "webpack-dev-server --port=4200 --history-api-fallback", "build": "webpack", "test": "karma start ./karma.conf.js", "lint": "ng lint", "e2e": "protractor ./protractor.conf.js", "prepree2e": "npm start", "pree2e": "webdriver-manager update --standalone false --gecko false --quiet", "startold": "webpack-dev-server --inline --progress --port 8080", "testold": "karma start", "buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"}, 

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

如果您确实需要一台服务器,则必须停止使用webpack-dev-server并开始在您的应用服务器中使用webpack-dev-middleware 。 它将“即时”处理捆绑(我认为它支持caching和热模块replace),并确保您对bundle.js的调用始终是最新的。