Jak zezwolić serwerowi webpack-dev-server, aby zezwolił na punkty wejścia z routera reaktywnego

Tworzę aplikację, która korzysta z webpack-dev-server w fazie rozwoju wraz z responsywnym routerem.

Wygląda na to, że webpack-dev-server jest zbudowany w oparciu o założenie, że będziesz mieć publiczny punkt wejścia w jednym miejscu (np. "/"), Podczas gdy react-router pozwala na nieograniczoną liczbę punktów wejścia.

Chcę korzystać z zalet serwera webpack-dev-server, zwłaszcza funkcji ponownego ładowania na gorąco, która jest świetna dla produktywności, ale nadal chcę mieć możliwość ładowania tras ustawionych w routerze reaktywnym.

Jak można to zaimplementować, żeby współpracowały? Czy mógłbyś uruchomić serwer ekspresowy przed serwerem webpack-dev-server w taki sposób, aby to umożliwić?

Skonfigurowałem proxy, aby to osiągnąć:

Masz regularny serwer ekspresowy, który obsługuje plik index.html na dowolnej trasie, chyba że jest to trasa zasobów. jeśli jest to zasób, żądanie jest przesyłane przez serwer proxy do serwera WWW

Twoje punkty wejścia na gorąco będą nadal wskazywały bezpośrednio na serwer deweloperski pakietu webpack, więc ponowne ładowanie na gorąco nadal działa.

Załóżmy, że uruchamiasz webpack-dev-server na 8081, a twój serwer proxy na 8080. Twój plik server.js będzie wyglądał następująco:

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

teraz utwórz swoje punkty wejścia w konfiguracji webpacka w następujący sposób:

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

Zwróć uwagę na bezpośrednie połączenie z 8081 w celu ponownego załadowania

upewnij się również, że przekazujesz bezwzględny adres URL do output.publicPathopcji:

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

Należy ustawić historyApiFallbackna WebpackDevServerjak prawdziwe to zadziałało. Oto mały przykład (dostosuj go do swoich celów):

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

Dla każdego, kto może nadal szukać tej odpowiedzi. Złożyłem proste obejście proxy, które osiąga to bez większych problemów, a konfiguracja trafia do webpack.config.js

Jestem pewien, że istnieją znacznie bardziej eleganckie sposoby testowania zawartości lokalnej za pomocą wyrażenia regularnego, ale to działa dla moich potrzeb.

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

Jeśli używasz webpack-dev-server przy użyciu CLI, możesz go skonfigurować poprzez webpack.config.js przekazując obiekt devServer:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js"
  },
  devServer: {
    historyApiFallback: true
  }
}

Spowoduje to przekierowanie do index.html za każdym razem, gdy zostanie napotkany 404.

UWAGA: Jeśli używasz publicPath, musisz również przekazać go do devServer:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js",
    publicPath: "admin/dashboard"
  },
  devServer: {
    historyApiFallback: {
      index: "admin/dashboard"
    }
  }
}

Możesz sprawdzić, czy wszystko jest poprawnie skonfigurowane, patrząc na kilka pierwszych wierszy danych wyjściowych (część z „404s zostanie zastąpiona: path ”).

Aby uzyskać bardziej aktualną odpowiedź, aktualną wersję pakietu webpack (4.1.1) możesz po prostu ustawić w swoim pliku webpack.config.js, na przykład:

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

Ważna część to historyApiFallback: true. Nie ma potrzeby uruchamiania niestandardowego serwera, po prostu użyj cli:

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

Chciałbym dodać do odpowiedzi dla przypadku, gdy uruchamiasz aplikację izomorficzną (tj. Renderujesz komponent React po stronie serwera).

W takim przypadku prawdopodobnie chcesz również automatycznie przeładować serwer, gdy zmienisz jeden z komponentów React. Robisz to z pipingpaczką. Wszystko, co musisz zrobić, to zainstalować go i dodać require("piping")({hook: true})gdzieś na początku server.js . Otóż ​​to. Serwer uruchomi się ponownie po zmianie dowolnego używanego przez niego składnika.

Rodzi to jednak inny problem - jeśli uruchomisz serwer webpacka z tego samego procesu co serwer ekspresowy (jak w zaakceptowanej odpowiedzi powyżej), serwer webpacka również uruchomi się ponownie i za każdym razem przekompiluje twój pakiet. Aby tego uniknąć, powinieneś uruchomić swój główny serwer i serwer webpacka w różnych procesach, tak aby potok zrestartował tylko twój serwer ekspresowy i nie dotykał webpacka. Możesz to zrobić za pomocą concurrentlypakietu. Przykład tego można znaleźć w zestawie startowym do izomorfii . W pliku package.json ma:

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

który uruchamia oba serwery jednocześnie, ale w oddzielnych procesach.

historyApiFallback może być również obiektem zamiast wartości logicznej, zawierającym trasy.

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

Może nie być we wszystkich przypadkach, ale wydaje się, że publicPath: '/'opcja w devServer jest najłatwiejszym rozwiązaniem problemu z głębokimi trasami, patrz: https://github.com/ReactTraining/react-router/issues/676

U mnie to zadziałało: po prostu dodaj najpierw oprogramowanie pośredniczące pakietu webpack, a app.get('*'...później program rozpoznawania nazw index.html,

więc express najpierw sprawdzi, czy żądanie pasuje do jednej z tras dostarczonych przez webpack (na przykład: /dist/bundle.jslub /__webpack_hmr_), a jeśli nie, to przejdzie doindex.html z* rezolwerem.

to znaczy:

app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
}))
app.use(require('webpack-hot-middleware')(compiler))
app.get('*', function(req, res) {
  sendSomeHtml(res)
})