Configuring the Webpack dev server to use Express routes APIs that require authentication through Passport

This is my routing structure:

Everything works as it should when using the Express server and assembling bundle.js from the CLI, but to speed up development, I want to use the Webpack dev server now, and now everything should be configured in a way that takes into account the Passport authorization that has been configured.

Here is my webpack configuration:

module.exports = {
  entry: [
    './client/src/index.js'
  ],
  output: {
    path: __dirname + '/server/public',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './client'//,
    // proxy: {
    //   '/api/*': {
    //     target: 'http://localhost:3000',
    //     secure: false
    //   }
    // }
  }
};

I went through the Webpack docs, but nothing is clear to me, and nothing of what I tried seemed to me. I turn around in circles, and obviously I missed the fundamental step, because, in my opinion, this is a fairly common use case.

Any pointers would be really appreciated.

Edit

From what I read, it seems that the option might be to actually cut the Webpack dev server and use webpack-hot-middleware and webpack-dev-middleware - does this sound right?

+4

All Articles