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

小开

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

如果你真的想要一个单一的服务器，你必须停止使用 webpack-dev-server，并开始使用 Webpack-dev-中间件在你的应用服务器。它将“动态”处理捆绑包(我认为它支持缓存和热模块替换) ，并确保对 bundle.js的调用始终是最新的。

小开

我找到了包含一个小配置的最简单的解决方案:

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

我通过访问使用 WebPack-DEV-Server 推送状态找到了这个。

小开

Webpack-dev-server官方文档上的 < a href = “ https://webpack.js.org/configuration/dev-server/# devserverhistory yapifallback”rel = “ noReferrer”> history yApiFallback 选项清楚地说明了如何通过使用

historyApiFallback: true

当找不到路由时，它就返回到 index.html

或者

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

小开

对我来说就是这样

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


},

正在研究防暴应用

小开

我的情况有点不同，因为我在运行弹射命令之后使用了带有 webpack 的角度 CLI 和“弹出”选项。我为 package.json 中的‘ npm start’修改了弹出的 npm 脚本，以传递—— history-api-falback 标志

“ start”: “ webpack-dev-server —— port = 4200 历史学院，后备学院”

"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' },
]
},
});

小开

向 config 添加公共路径可以帮助 webpack 理解真正的 root (/) ，即使是在子路由上，例如 /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
}

小开

我知道这个问题是针对 webpack-dev-server 的，但是对于任何使用 Webpack-服务2.0。和 Webpack 4.16.5的人来说，webpack-service 允许添加组件。你需要创建 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)));
}
});
});

翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳

您需要将 dev 脚本从 webpack-serve更改为 node serve.config.js。

小开

对我来说，我有点例如 /orgs.csv，所以我必须把它放到我的 webpack config 中。

devServer: {
historyApiFallback: {
disableDotRule: true,
},
},

小开

我同意现有的大多数答案。

我想提到的一个关键问题是，当 手动操作在 更深层次的道路上重新加载页面时，如果遇到问题，那么可能需要额外的设置(特别是 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
}