如何允许webpack-dev-server允许来自react-router的入口点 [英] How to allow for webpack-dev-server to allow entry points from react-router

问题描述

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

似乎webpack-dev-server是围绕假设你将在一个地方有一个公共入口点（即/），而react-router允许无限量的入口点。

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

如何实现它以便它们一起工作？你能以这种方式在webpack-dev-server前面运行一个快速服务器吗？

解决方案

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

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

你的反应热入口点仍然会直接指向webpack dev服务器，所以热重载仍然我们假设您在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'）; 
 
 ## --------你的代理---------------------- 
 var app = express （）; 
 ##代理静态资产请求
 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 =新的WebpackDevServer（webpack（config），{
 contentBase：__ dirname，
 hot：true，
 quiet：false，
 noInfo：false，
 publicPath：/ assets /，
 
 stats：{colors：true} 
}）; 
 
 ##运行两台服务器
 server.listen（8081，localhost，function（）{}）; 
 app.listen（8080）; 
  

现在在webpack配置中设置你的入口点如下：

 条目：[
'./src/main.js'，
'webpack / hot / dev-server'，
' webpack-dev-server / client？http：// localhost：8081'
] 
  

注意直接调用8081进行hotreload

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

 输出：{
 publicPath：http：// localhost：8081 / assets /，
 // ... 
} 
  

I'm creating an app that uses webpack-dev-server in development alongside react-router.

It seems that webpack-dev-server is built around the assumption that you will have a public entry point at one place (i.e. "/"), whereas react-router allows for an unlimited amount of entry points.

I want the benefits of the webpack-dev-server, especially the hot reloading feature that is great for productivity, but I still want to be able to load routes set in react-router.

How could one implement it such that they work together? Could you run an express server in front of webpack-dev-server in such a way to allow this?

解决方案

I set up a proxy to achieve this:

You have a regular express webserver that serves the index.html on any route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server

your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.

Let's assume you run webpack-dev-server on 8081 and your proxy at 8080. Your server.js file will look like this:

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

now make your entrypoints in the webpack config like so:

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

note the direct call to 8081 for hotreload

also make sure you pass an absolute url to the output.publicPath option:

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

这篇关于如何允许webpack-dev-server允许来自react-router的入口点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！