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

javascript reactjs react-router webpack

2022-08-30 05:06:09

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

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

我想要webpack-dev-server的好处，特别是热重载功能，这对生产力很有帮助，但我仍然希望能够加载react-router中设置的路由。

如何实现它，使它们协同工作？你能在webpack-dev-server前面运行一个快速服务器来允许这样做吗？

答案 1

您应该将设置为 true 才能正常工作。这里有一个小例子（调整以适合您的目的）：historyApiFallbackWebpackDevServer

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);
});

答案 2

我设置了一个代理来实现这一点：

您有一个常规的快速 Web 服务器，可在任何路由上为索引.html提供服务，除非它是资产路由。如果它是资产，则请求将代理到Web-dev-server。

您的 react 热入口点仍将直接指向 webpack 开发服务器，因此热重载仍然有效。

假设您在 8081 上运行 webpack-dev-server，在 8080 上运行代理。您的服务器.js文件将如下所示：

"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');

var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');

## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));

app.get('/*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
    contentBase: __dirname,
    hot: true,
    quiet: false,
    noInfo: false,
    publicPath: "/assets/",

    stats: { colors: true }
});

## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);

现在，在 webpack 配置中使入口点如下所示：

 entry: [
     './src/main.js',
     'webpack/hot/dev-server',
     'webpack-dev-server/client?http://localhost:8081'
 ]

请注意直接调用 8081 进行热加载

还要确保将绝对 url 传递给以下选项：output.publicPath

 output: {
     publicPath: "http://localhost:8081/assets/",
     // ...
 }