[SOLVED] webpack-hot-middleware setup with single entry point

webpack-hot-middleware setup with single entry point

I am serving a Webpack bundle from node and attempting to use 'webpack-hot-middleware' for hot reloading.

The Webpack bundle uses a 'var' libraryTarget and exposes a single file which exports all of the modules:

Webpack config sample:

const config = {
    entry: './lib/src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
      library: "myLib",
      libraryTarget: 'var',
    },
    ...

The webpack-hot-middleware documentation setup instructions say:

2) Add 'webpack-hot-middleware/client' into the entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.

Question is - how / can I set this up with my current configuration of a single entry point since I don't have an entry array?

What I have tried:

Converting the 'entry' value from a string to an array like this:

entry: ['./lib/src/index.js', 'webpack-hot-middleware/client']

However the global var being exposed from index.js became undefined at that point.

Thanks for any suggestions.

Solution

You are close with: entry: ['./lib/src/index.js', 'webpack-hot-middleware/client'].

You need to change that to:

entry: {
    main: ['./lib/src/index.js', 'webpack-hot-middleware/client']
}

The value for entry needs to be either a string or an object. the webpack-hot-middleware/client is a little confusing with regards to this when they say "Add 'webpack-hot-middleware/client' into the entry array.". I had the same issue you're having and was only able to figure it out after looking at the webpack entry documentation and looking at some examples of implementation.