如何允许 webpack-dev-server 允许来自 react-router 的入口点

小能豆

如何允许 webpack-dev-server 允许来自 react-router 的入口点

javascript

我正在创建一个应用程序，在开发中使用 webpack-dev-server 和 react-router。

似乎 webpack-dev-server 是基于这样的假设而构建的：你将在一个地方有一个公共入口点（即“/”），而 react-router 允许无限数量的入口点。

我想要 webpack-dev-server 的好处，尤其是对提高工作效率非常有帮助的热重新加载功能，但我仍然希望能够加载在 react-router 中设置的路由。

如何实现它们协同工作？你能在 webpack-dev-server 前面运行一个 express 服务器来实现这一点吗？

阅读 45

2024-06-12

共1个答案

小能豆

您应该将设置historyApiFallback为WebpackDevServertrue 才能使其工作。这是一个小例子（调整以适合您的目的）：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');


var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
}).listen(port, ip, function (err) {
    if(err) {
        return console.log(err);
    }

    console.log('Listening at ' + ip + ':' + port);
});

2024-06-12