Cách cho phép webpack-dev-server cho phép các điểm vào từ bộ định tuyến phản ứng

Tôi đang tạo một ứng dụng sử dụng webpack-dev-server để phát triển cùng với bộ định tuyến phản ứng.

Có vẻ như webpack-dev-server được xây dựng xung quanh giả định rằng bạn sẽ có một điểm vào công khai tại một nơi (tức là "/"), trong khi bộ định tuyến phản ứng cho phép số lượng điểm nhập không giới hạn.

Tôi muốn những lợi ích của webpack-dev-server, đặc biệt là tính năng tải lại nóng rất tốt cho năng suất, nhưng tôi vẫn muốn có thể tải các tuyến đường được đặt trong bộ định tuyến phản ứng.

Làm thế nào một người có thể thực hiện nó để họ làm việc cùng nhau? Bạn có thể chạy một máy chủ tốc hành trước webpack-dev-server theo cách như vậy để cho phép điều này không?

Tôi thiết lập một proxy để đạt được điều này:

Bạn có một máy chủ web cấp tốc thông thường phục vụ index.html trên bất kỳ tuyến nào, ngoại trừ nếu đó là tuyến tài sản. nếu đó là một tài sản, yêu cầu sẽ được ủy quyền cho máy chủ web-dev

các điểm truy cập nóng phản ứng của bạn vẫn sẽ trỏ trực tiếp vào máy chủ phát triển webpack, vì vậy tải lại nóng vẫn hoạt động.

Giả sử bạn chạy webpack-dev-server trên 8081 và proxy của bạn ở 8080. Tệp server.js của bạn sẽ trông như thế này:

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

bây giờ làm cho điểm truy cập của bạn trong cấu hình webpack như vậy:

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

lưu ý cuộc gọi trực tiếp tới 8081 để tải hotrel

cũng đảm bảo bạn chuyển một url tuyệt đối cho output.publicPathtùy chọn:

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

Bạn nên thiết lập historyApiFallbackcác WebpackDevServergiá trị đối với này để làm việc. Đây là một ví dụ nhỏ (điều chỉnh để phù hợp với mục đích của bạn):

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

Đối với bất cứ ai khác có thể vẫn đang tìm kiếm câu trả lời này. Tôi kết hợp một bỏ qua proxy đơn giản để đạt được điều này mà không gặp nhiều rắc rối và cấu hình đi vào webpack.config.js

Tôi chắc chắn có nhiều cách thanh lịch hơn để kiểm tra nội dung cục bộ bằng regex, nhưng cách này phù hợp với nhu cầu của tôi.

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

Nếu bạn đang chạy webpack-dev-server bằng CLI, bạn có thể định cấu hình nó thông qua webpack.config.js truyền đối tượng devServer:

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

Điều này sẽ chuyển hướng đến index.html mỗi khi gặp 404.

LƯU Ý: Nếu bạn đang sử dụng publicPath, bạn cũng sẽ cần chuyển nó cho devServer:

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

Bạn có thể xác minh rằng mọi thứ được thiết lập chính xác bằng cách xem xét một vài dòng đầu ra (phần có "404s sẽ chuyển sang: path ").

Để có câu trả lời gần đây hơn, phiên bản hiện tại của webpack (4.1.1), bạn chỉ có thể đặt cái này trong webpack.config.js như sau:

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

Phần quan trọng là historyApiFallback: true. Không cần chạy máy chủ tùy chỉnh, chỉ cần sử dụng cli:

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

Tôi muốn thêm vào câu trả lời cho trường hợp khi bạn chạy một ứng dụng đẳng cấu (tức là hiển thị phía máy chủ thành phần React.)

Trong trường hợp này, có lẽ bạn cũng muốn tự động tải lại máy chủ khi bạn thay đổi một trong các thành phần React của mình. Bạn làm điều này với pipinggói. Tất cả bạn phải làm là cài đặt nó và thêm require("piping")({hook: true})một nơi nào đó vào đầu server.js của bạn . Đó là nó. Máy chủ sẽ khởi động lại sau khi bạn thay đổi bất kỳ thành phần nào được sử dụng bởi nó.

Tuy nhiên, điều này lại nảy sinh một vấn đề khác - nếu bạn chạy máy chủ webpack từ cùng một quy trình với máy chủ cấp tốc của bạn (như trong câu trả lời được chấp nhận ở trên), máy chủ webpack cũng sẽ khởi động lại và sẽ biên dịch lại gói của bạn mỗi lần. Để tránh điều này, bạn nên chạy máy chủ chính và máy chủ webpack theo các quy trình khác nhau để đường ống chỉ khởi động lại máy chủ tốc hành của bạn và sẽ không chạm vào webpack. Bạn có thể làm điều này với concurrentlygói. Bạn có thể tìm thấy một ví dụ về điều này trong bộ phản ứng-isomorphic-starterkit . Trong gói.json , anh ta có:

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

mà chạy cả hai máy chủ cùng một lúc nhưng trong các quy trình riêng biệt.

historyApiFallback cũng có thể là một đối tượng thay vì Boolean, chứa các tuyến.

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

Có thể không phải trong mọi trường hợp, nhưng có vẻ publicPath: '/'tùy chọn trong devServer là giải pháp dễ nhất để khắc phục sự cố tuyến đường sâu, xem: https://github.com/ReactTraining/react-router/issues/676

Điều này làm việc cho tôi: chỉ cần thêm phần mềm trung gian webpack trước và app.get('*'...bộ giải quyết index.html sau,

do đó thể hiện đầu tiên sẽ kiểm tra xem các yêu cầu phù hợp với một trong những tuyến đường cung cấp bởi webpack (như: /dist/bundle.jshoặc /__webpack_hmr_) và nếu không, sau đó nó sẽ di chuyển đến index.htmlvới *giải quyết.

I E:

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