How to allow for webpack-dev-server to allow entry points from react-router

问题:

I'm creating an app that uses webpack-dev-server in development alongside react-router.

It seems that webpack-dev-server is built around the assumption that you will have a public entry point at one place (i.e. "/"), whereas react-router allows for an unlimited amount of entry points.

I want the benefits of the webpack-dev-server, especially the hot reloading feature that is great for productivity, but I still want to be able to load routes set in react-router.

How could one implement it such that they work together? Could you run an express server in front of webpack-dev-server in such a way to allow this?

回答1:

I set up a proxy to achieve this:

You have a regular express webserver that serves the index.html on any route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server

your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.

Let's assume you run webpack-dev-server on 8081 and your proxy at 8080. Your server.js file will look like this:

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

now make your entrypoints in the webpack config like so:

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

note the direct call to 8081 for hotreload

also make sure you pass an absolute url to the output.publicPath option:

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

回答2:

You should set historyApiFallback of WebpackDevServer as true for this to work. Here's a small example (tweak to fit your purposes):

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

回答3:

For anyone else that may still be looking for this answer. I put together a simple proxy bypass which achieves this without much hassle and the config goes into the webpack.config.js

I am sure there are much more elegant ways to test for local content using regex, but this works for my needs.

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

回答4:

If you're running webpack-dev-server using CLI, you can configure it through webpack.config.js passing devServer object:

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

This will redirect to index.html everytime it 404 is encountered.

NOTE: If you're using publicPath, you'll need to pass it to devServer too:

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

You can verify that everything is setup correctly by looking at the first few lines of the output (the part with "404s will fallback to: path").

回答5:

I'd like to add to the answer for the case when you run an isomorphic app (i.e. rendering React component server-side.)

In this case you probably also want to automatically reload the server when you change one of your React components. You do this with the piping package. All you have to do is install it and add require("piping")({hook: true}) somewhere in the beginning of you server.js. That's it. The server will restart after you change any component used by it.

This rises another problem though - if you run webpack server from the same process as your express server (as in the accepted answer above), the webpack server will also restart and will recompile your bundle every time. To avoid this you should run your main server and webpack server in different processes so that piping would restart only your express server and won't touch webpack. You can do this with concurrently package. You can find an example of this in react-isomorphic-starterkit. In the package.json he has:

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

which runs both servers simultaneously but in separate processes.

回答6:

historyApiFallback can also be an object instead of a Boolean, containing the routes.

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

回答7:

May be not in all cases, but seems the publicPath: '/' option in the devServer is easiest solution to fix deep routes issue, see: https://github.com/ReactTraining/react-router/issues/676

回答8:

This worked for me: just simply add the webpack middlewares first and the app.get('*'... index.html resolver later,

so express will first check if the request matches one of the routes provided by webpack (like: /dist/bundle.js or /__webpack_hmr_) and if not, then it will move to the index.html with the * resolver.

ie:

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

文章来源: How to allow for webpack-dev-server to allow entry points from react-router