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



webpack dev server file (6)

我正在创建一个应用程序,它与反应路由器一起使用webpack-dev-server进行开发。

看起来,webpack-dev-server是围绕假设你将在一个地方有一个公共入口点(即“/”)而构建的,而react-router允许无限量的入口点。

我想要webpack-dev-server的好处,尤其是热重载功能,它对于提高生产力非常有用,但我仍然希望能够加载在react-router中设置的路由。

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

https://ffff65535.com


historyApiFallback也可以是一个对象,而不是一个包含路由的布尔值。

historyApiFallback: navData && {
  rewrites: [
      { from: /route-1-regex/, to: 'route-1-example.html' }
  ]
}


对于任何可能仍然在寻找这个答案的人。 我把一个简单的代理旁路放在一起,这样做没有太多麻烦,并且配置进入了webpack.config.js

我相信有更多优雅的方法来使用正则表达式来测试本地内容,但这可以满足我的需求。

devServer: {
  proxy: { 
    '/**': {  //catch all requests
      target: '/index.html',  //default target
      secure: false,
      bypass: function(req, res, opt){
        //your custom code to check for any exceptions
        //console.log('bypass check', {req: req, res:res, opt: opt});
        if(req.path.indexOf('/img/') !== -1 || req.path.indexOf('/public/') !== -1){
          return '/'
        }

        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index.html';
        }
      }
    }
  }
} 

对于最近的回答,当前版本的webpack(4.1.1),你可以在你的webpack.config.js中这样设置它:

const webpack = require('webpack');

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']  
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true,
      historyApiFallback: true
    }
  };

重要的部分是historyApiFallback: true 。 无需运行自定义服务器,只需使用cli:

"scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },

我建立了一个代理来实现这一点:

你有一个普通的快递网络服务器,它可以在任何路线上为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');

## --------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/",
        // ...
    }

我想为运行同构应用程序的情况添加答案(即渲染React组件服务器端)。

在这种情况下,您可能还想在更改其中一个React组件时自动重新加载服务器。 你用piping包做这个。 你所要做的就是安装它,并在server.js的开头添加require("piping")({hook: true}) 。 而已。 更改其使用的任何组件后,服务器将重新启动。

然而,这又引发了另一个问题 - 如果从与express服务器相同的进程运行webpack服务器(如上面所接受的答案),webpack服务器也将重新启动,并且每次都会重新编译您的bundle。 为避免这种情况,您应该在不同的进程中运行主服务器和webpack服务器,以便管道系统只会重启您的快速服务器,并且不会触及webpack。 你可以用concurrently包装来做到这一点。 你可以在react-isomorphic-starterkit找到这个例子。 在package.json中他有:

"scripts": {
    ...
    "watch": "node ./node_modules/concurrently/src/main.js --kill-others 'npm run watch-client' 'npm run start'"
  },

它可以同时运行两台服务器,但在不同的进程中运行





react-router