webpack-dev-middleware通过所有路由

Question

我正在使用webpack-dev-middleware以及在客户端使用react-router的react应用程序.

如果我在根目录下输入应用程序/,但webpack-dev-middleware不会提供任何路径,例如'/ my-route`,那么一切都很顺利

server.use(webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

我尝试使用通配符,它​​允许所有路径通过并获取html页面,但是当页面请求时main.js,它现在也获得了html页面,而不是打包的javascript.

server.use('/*', webpackDevMiddleware(compiler, {
    publicPath: '/'
}));

目标是服务器不知道的任何路由,获取与root相同的内容,然后react-router将处理在客户端上显示正确的视图(或404).

任何帮助将非常感激.

Answer 1

尝试使用connect-history-api-fallback npm包,这是webpack-dev-server在同一目的下使用的.

这对我有用:

var history = require('connect-history-api-fallback');
server.use(history());
server.use(webpackDevMiddleware(compiler, {
  publicPath: '/'
}));