如何允許webpack-dev-server允許來自react-router的入口點

Question

我正在創建一個應用程序，該應用程序在開發中與react-router一起使用webpack-dev-server。

看來，webpack-dev-server是圍繞假設你將在一個地方（即「/」）有公共入口點而建立的，而react-router允許無限量的入口點。

我想要webpack-dev-server的好處，特別是熱重載功能，它對生產力非常好，但我仍然希望能夠在react-router中加載路由設置。

如何實現它，使它們一起工作？你能以這種方式在webpack-dev-server前面運行一個快速服務器嗎？

Answer 1

我成立了一個代理來實現這一目標：

你有一個正規快件網絡服務器，供應中的index.html上的任何路線，除非其資產路線。如果它是一項資產，請求會被代理到web-dev-server上，您的反應仍然會直接指向webpack dev服務器，因此熱重新加載仍然有效。

讓我們假設你運行在8081的WebPack-DEV-服務器和您在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' 
    ] 

記爲hotreload

也是8081直接調用確保你傳遞一個絕對URL到output.publicPath選項：

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

Answer 2

您應該將historyApiFallback設置爲WebpackDevServer，因爲這是正確的。這裏有一個小例子（調整到適合你的目的）：

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

Answer 3

我想，當你運行一個同構的應用程序添加到答案的情況下

（即呈現陣營組件服務器端）。

在這種情況下，您可能還想在更改其中一個React組件時自動重新加載服務器。您可以使用piping包進行此操作。你所要做的就是安裝它並在你開始的某個地方添加require("piping")({hook: true})server.js。而已。更改其使用的任何組件後，服務器將重新啓動。

這會引發另一個問題 - 如果您從express服務器的相同進程運行webpack服務器（如上面接受的答案），webpack服務器也會重新啓動並且每次都會重新編譯您的bundle。爲避免這種情況，您應該在不同的進程中運行主服務器和webpack服務器，以便管道系統只會重啓您的快速服務器，並且不會觸及webpack。 您可以使用concurrently包進行此操作。你可以在react-isomorphic-starterkit找到一個這樣的例子。在包中。JSON他有：

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

這同時運行兩個服務器，但在單獨的進程。

Answer 4

對於任何可能仍在尋找此答案的人。我放了一個簡單的代理旁路，實現這一點，沒有太多的麻煩和配置進入webpack.config.js

我相信有更多優雅的方式來測試本地內容使用正則表達式，但這適用於我需要。

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

這將重定向：

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

Answer 5

如果您使用CLI運行的WebPack-dev的服務器，你可以通過傳遞devServer對象webpack.config.js配置它到每次遇到404時index.html。

注：如果您使用publicPath，你需要將它傳遞給devServer太：

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

您可以驗證一切都設置正確通過查看第一輸出的幾行（帶有「404s的部分將回退到：路徑」）。

Answer 6

historyApiFallback也可以是一個對象，而不是一個布爾值，含有該路由。

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

Answer 7

可能不會在所有情況下，但似乎在devServer的publicPath: '/'選擇是解決深航的問題最簡單的方法，請參見：https://github.com/ReactTraining/react-router/issues/676

Answer 8

這爲我工作：只需在第一次添加的WebPack中間件和app.get('*'... index.html的分解後，

所以快車將首先檢查該請求是否匹配由的WebPack提供的路線之一（如：/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) 
})