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

小编典典

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

reactjs

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

似乎webpack-dev-server是建立在以下假设的基础上的：您将在一个位置拥有一个公共入口点（即“ /”），而react-
router允许无限数量的入口点。

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

一个人如何才能实现它以使其协同工作？您能以这种方式在webpack-dev-server前面运行快速服务器吗？

阅读 357

2020-07-22

共1个答案

小编典典

我设置了代理来实现此目的：

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

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

假设您在8081上运行webpack-dev-server，在8080上运行代理。您的server.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进行hotreload

还要确保将绝对网址传递给该output.publicPath选项：

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

2020-07-22