Usage with webpack-hot-middleware

[m10]

We use webpack-hot-middleware [1] in Development for hot reloading.

Our entrypoints currently look like this:

Development:

entry: {
  main: [
    // must be first entry to properly set public path
    path.resolve(dirname, 'src/webpack-public-path'),
    'webpack-hot-middleware/client?reload=true',
    path.resolve(dirname, 'src/js/index')
  ],
}

Production:

entry: {
  main: path.resolve(dirname, 'src/js/index'),
}

In development (only) each entrypoint needs to have 'webpack-hot-middleware/client?reload=true'.
How can we configure this with pug-plugin?

[1] https://github.com/webpack-contrib/webpack-hot-middleware

[webdiscus]

@m10
Thanks for the interest question.

The webpack-dev-server already uses webpack-dev-middleware under the hood.
You can use the webpack-dev-serve. It is very easy to use and requires no configuration for entries.

npm install webpack-dev-server --save-dev

To enable hot reloading add following configuration:

devServer: {
      static: {
        directory: path.join(__dirname, 'public'),
        hot: true, // defaults is true
      },

      // add this for watching your files
      watchFiles: {
        paths: ['src/**/*.*'],
        options: {
          usePolling: true,
        },
      },
    },

This is enough in all cases.

You can try the Hello World in dev modus:

git clone https://github.com/webdiscus/pug-plugin.git
cd ./pug-plugin/examples/hello-world/
npm i
npm run start

Change any source file and the browser will be hot reloaded.

[m10]

Yes, I read about it.

Our setup involves using browser-sync with webpack-dev-middleware and webpack-hot-middleware.
We use this setup to have more control over the dev server. Currently we implementet logic that would add html-webpack-plugin instances for each file in a directory when files in that directory are added/removed. After generating a new webpack config we reinitialize webpack and replace the middlewares, all without restarting the server. The features of browsers-sync are a bonus.

We would like to implement the equivalent with pug-plugin but this would not work as well with webpack-dev-server (probably - I didn't really try). It would require quite a rewrite of this functionality anyhow.
If there is no good way to implement this, I will try to do it with webpack-dev-server.

I am unusre how this could be solved.
Maybe it would be possible to add an option to the plugin to "amend" the javascript "entry points" through a function?
Something akin to sass-loaders additionalData https://www.npmjs.com/package/sass-loader#user-content-additionaldata but instead of raw source it would provide paths that should be added.

[webdiscus]

Currently we implementet logic that would add html-webpack-plugin instances for each file in a directory when files in that directory are added/removed. After generating a new webpack config we reinitialize webpack and replace the middlewares, all without restarting the server.

I understand the problem:
continue watching after changes in webpack configuration, w/o restarting of webpack, because new restart may take a long time.

Currently, I must self restart the webpack after add/remove a new template as entry-point in webpack config. But for me it's no problem, I do it not each 5 minutes.

I don't know the solution to this problem. I'm sorry.

---

P.S.:

The pug plugin is designed to properly development with Pug, where the entry point is the Pug template, and all dependent scripts and styles will be used in the right place - in the Pug template.
This is the principle of pug-plugin - to avoid using assets in webpack entry.

But the webpack-hot-middleware requires the use of assets in the webpack entry. These are mutually exclusive use cases.
So using the webpack-hot-middleware with the pug plugin is impossible. The pug plugin works fine with the webpack-dev-server.

For more control of a middleware you can try to use the devServer.setupMiddlewares option.

To write the compiled assets to disk can be used the option:

devServer: {
 static: {
    directory: path.join(__dirname, 'public'),
    hot: true, // defaults is true
  },
  { 
    devMiddleware: { 
      writeToDisk: true
    }
  }
}