How to reference in-memory bundle from webpack-dev-middleware / webpack-hot-middleware

Question

I'm implementing Webpack into a legacy Express frontend application. I've followed the instructions to implement both webpack-dev-middleware and webpack-hot-middleware, but I can't figure out how to actually reference the in-memory bundle that webpack-dev-middleware builds in my index file.

server.js:

...... 
// Webpack HMR
if (isDevelopment) {
  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config');
  const compiler = webpack(webpackConfig);

  app.use(
    require('webpack-dev-middleware')(compiler, {
        noInfo: false,
        hot: true,
        publicPath: webpackConfig.output.publicPath,
    })
  );
  app.use(require('webpack-hot-middleware')(compiler));
}
....

webpack.config.js:

...
entry: {
    app: [
      'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
      path.join(__dirname, './public/js/boot/app.js'),
    ],
    deps: [
      'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
      path.join(__dirname, './public/js/boot/deps.js'),
    ]
  },
output: {
    path: isDevelopment ? path.join(__dirname, './public/js/bundles') : path.join(__dirname, './dist/js/bundles'),
    publicPath: '/',
    filename: '[name].js'
  },
....

Base view: server/views/index.jade:

...
  script(src='/js/bundles/app.js')
  script(src='/js/bundles/deps.js')
...

Note: If I disable webpack-dev-middleware and just build the files using Webpack, they serve just fine. The problem is (I think) the way that I'm referencing the bundles using that path in my base index.jade view. Since webpack-dev-middleware writes the bundles into memory instead of to that location in the filesystem, it's trying to read something that's not there.

What's the correct way to reference those bundle paths so they're the in-memory bundles from webpack-dev-middleware?

PROJECT LAYOUT:

• /
  • server.js
  • webpack.config.js
  • server/
    • views/
    • index.jade (my base view)
  • public/
    • js/
      ...

Dm

Normally, the reference is automatic. I think it's a problem of path, your view paths should be from your webpack path configuration. Try with script(src='/app.js') and script(src='/deps.js') and tell me. – Dekameter