如何告诉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
的调用始终是最新的。