it-roy-ru.com

Как разрешить для webpack-dev-server разрешать точки входа из реагирующего маршрутизатора

Я создаю приложение, которое использует webpack-dev-server в разработке наряду с Reaction-router.

Похоже, что webpack-dev-server построен на предположении, что у вас будет публичная точка входа в одном месте (то есть "/"), тогда как реагирующий маршрутизатор допускает неограниченное количество точек входа.

Я хочу использовать преимущества webpack-dev-server, особенно функцию горячей перезагрузки, которая отлично подходит для производительности, но я все еще хочу иметь возможность загружать маршруты, установленные в реакции-маршрутизаторе.

Как можно реализовать это так, чтобы они работали вместе? Не могли бы вы запустить экспресс-сервер перед webpack-dev-server таким образом, чтобы это разрешить?

107
Nathan Wienert

Я настроил прокси для достижения этой цели:

У вас есть регулярный экспресс-веб-сервер, который обслуживает index.html на любом маршруте, кроме случаев, когда это маршрут актива. если это актив, запрос перенаправляется на web-dev-сервер

ваши активные горячие точки входа будут по-прежнему направлены непосредственно на сервер разработки веб-пакетов, поэтому горячая перезагрузка все еще работает.

Предположим, вы запустили webpack-dev-server на 8081, а ваш прокси на 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/",
        // ...
    }
67
Retozi

Вы должны установить historyApiFallback из WebpackDevServer как true, чтобы это работало. Вот небольшой пример (твик для ваших целей):

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);
});
100
Juho Vepsäläinen

Для всех, кто еще может искать этот ответ. Я собрал простой обход прокси, который достигает этого без особых хлопот, и конфиг идет в 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';
        }
      }
    }
  }
} 
22
Werner Weber

Если вы используете webpack-dev-server с помощью CLI, вы можете настроить его через webpack.config.js, передав объект devServer:

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

Это будет перенаправлять на index.html каждый раз, когда встречается 404.

ПРИМЕЧАНИЕ. Если вы используете publicPath, вам нужно будет передать его и devServer:

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

Вы можете убедиться, что все настроено правильно, посмотрев первые несколько строк вывода (часть с "404s будет иметь запас к ( path ").

enter image description here

10
Eugene Kulabuhov

Для более свежего ответа, текущую версию 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"
  },
8
Michael Brown

Я хотел бы добавить к ответу случай, когда вы запускаете изоморфное приложение (то есть рендеринг React компонента на стороне сервера).

В этом случае вы, вероятно, также захотите автоматически перезагрузить сервер при изменении одного из ваших React компонентов. Вы делаете это с пакетом piping. Все, что вам нужно сделать, это установить его и добавить require("piping")({hook: true}) где-то в начале вашего server.js . Вот и все. Сервер перезапустится после того, как вы измените любой используемый им компонент.

Однако возникает еще одна проблема - если вы запускаете сервер веб-пакетов из того же процесса, что и ваш экспресс-сервер (как в принятом ответе выше), сервер веб-пакетов также перезапускается и каждый раз перекомпилирует ваш пакет. Чтобы избежать этого, вы должны запускать ваш основной сервер и сервер веб-пакетов в разных процессах, чтобы трубопровод перезапускал только ваш экспресс-сервер и не касался веб-пакета. Вы можете сделать это с пакетом concurrently. Вы можете найти пример этого в response-isomorphic-starterkit . В package.json он имеет:

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

который запускает оба сервера одновременно, но в отдельных процессах.

2
Viacheslav

historyApiFallback также может быть объектом вместо логического, содержащего маршруты.

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

Может быть не во всех случаях, но кажется, что опция publicPath: '/' в devServer - это самое простое решение для решения проблемы глубоких маршрутов, см .: https://github.com/ReactTraining/react-router/issues/676

1
Alex

Это сработало для меня: просто сначала добавьте промежуточное ПО для веб-пакетов, а затем - app.get('*'... index.html,

поэтому express сначала проверит, соответствует ли запрос одному из маршрутов, предоставляемых веб-пакетом (например: /dist/bundle.js или /__webpack_hmr_), а если нет, то он переместится в index.html с распознавателем *.

то есть:

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)
})
0
Graham Norton