React 路由器允许 React 应用处理 /arbitrary/route。为了让它工作，我需要我的服务器在任何匹配的路由上发送 React 应用程序。
但webpack dev server 不处理任意端点。
这里有一个使用附加快递服务器的解决方案。 How to allow for webpack-dev-server to allow entry points from react-router
但我不想启动另一个快速服务器来允许路由匹配。我只想告诉 webpack 开发服务器匹配任何 url 并将我的 react 应用程序发送给我。请。
【问题讨论】：
标签： reactjs ecmascript-6 webpack react-router
如果您选择使用webpack-dev-server，则不应使用它来为您的整个 React 应用程序提供服务。您应该使用它来提供您的 bundle.js 文件以及静态依赖项。在这种情况下，您必须启动 2 个服务器，一个用于 Node.js 入口点，它们实际上将处理路由并提供 HTML，另一个用于捆绑和静态资源。
如果你真的想要一个服务器，你必须停止使用webpack-dev-server 并开始在你的应用服务器中使用webpack-dev-middleware。它将“即时”处理捆绑包（我认为它支持缓存和热模块替换）并确保您对bundle.js 的调用始终是最新的。
【讨论】：
我找到了包含一个小配置的最简单的解决方案：
devServer: {
port: 3000,
historyApiFallback: {
index: 'index.html'
}
}
我通过访问：PUSHSTATE WITH WEBPACK-DEV-SERVER 找到了这个。
【讨论】：
--history-api-fallback
devServer: { port: 3000, historyApiFallback: true },
historyApiFallback 官方文档中webpack-dev-server 的选项清楚地解释了如何使用
historyApiFallback: true
当找不到路由时，它会简单地回退到 index.html
或
// output.publicPath: '/foo-app/'
historyApiFallback: {
index: '/foo-app/'
}
【讨论】：
historyApiFallback
webpack-dev-server 是 webpack-serve 的继任者，而不是 stackoverflow.com/questions/31945763/… 中提到的其他方式。
像这样为我工作
devServer: {
contentBase: "./src",
hot: true,
port: 3000,
historyApiFallback: true
},
开发防暴应用
【讨论】：
我的情况有点不同，因为我在运行 ng eject 命令后使用了带有 webpack 的 angular CLI 和 'eject' 选项。我修改了 package.json 中“npm start”的弹出 npm 脚本以传入 --history-api-fallback 标志
"start": "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"},
【讨论】：
当在此位置未找到其他资源时，您可以启用 historyApiFallback 以提供 index.html 而不是 404 错误。
let devServer = new WebpackDevServer(compiler, {
historyApiFallback: true,
});
如果您想为不同的 URI 提供不同的文件，您可以在此选项中添加基本的重写规则。 index.html 仍将用于其他路径。
let devServer = new WebpackDevServer(compiler, {
historyApiFallback: {
rewrites: [
{ from: /^\/page1/, to: '/page1.html' },
{ from: /^\/page2/, to: '/page2.html' },
{ from: /^\/page3/, to: '/page3.html' },
]
},
});
【讨论】：
向配置添加公共路径有助于 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
}
【讨论】：
historyApiFallback 技巧仅适用于 URL 的最后一部分。 /test 会起作用，但/test/test 会给出 404。
historyApiFallback: {index: '/'} 或historyApiFallback: true（两者都为我工作），设置publicPath 在我的情况下也是必不可少的（路由器5.2）。
我知道这个问题是针对 webpack-dev-server 的，但对于任何使用 webpack-serve 2.0. 和 webpack 4.16.5 的人； webpack-serve 允许附加组件。你需要创建 serve.config.js:
const serve = require('webpack-serve');
const argv = {};
const config = require('./webpack.config.js');
const history = require('connect-history-api-fallback');
const convert = require('koa-connect');
serve(argv, { config }).then((result) => {
server.on('listening', ({ server, options }) => {
options.add: (app, middleware, options) => {
// HistoryApiFallback
const historyOptions = {
// ... configure options
};
app.use(convert(history(historyOptions)));
}
});
});
您需要将开发脚本从 webpack-serve 更改为 node serve.config.js。
【讨论】：
对我来说，我有点“。”在我的路上，例如/orgs.csv 所以我不得不把它放在我的 webpack 配置中。
devServer: {
historyApiFallback: {
disableDotRule: true,
},
},
【讨论】：
我同意大多数现有答案。
我想提一下的一个关键问题是，如果您在手动在更深的路径上重新加载页面时遇到问题，它会保留路径的最后一部分以外的所有部分和大头钉在 js 捆绑文件的名称上，您可能需要一个额外的设置（特别是 publicPath 设置）。
例如，如果我有一个路径 /foo/bar 并且我的捆绑程序文件名为 bundle.js。当我尝试手动刷新页面时，我得到一个 404 说 /foo/bundle.js 找不到。有趣的是，如果您尝试从路径 /foo 重新加载，您不会发现任何问题（这是因为回退处理了它）。
尝试将以下内容与您现有的 webpack 配置结合使用来解决此问题。 output.publicPath 是关键！
output: {
filename: 'bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'public')
},
...
devServer: {
historyApiFallback: true
}
【讨论】：