Webpack --watch infinitely triggers itself when index.html is created, webpack "clean" also wipes out favicon.

[Deleted user]

Two different issues I've found today in this plugin, not sure if it should be in two different reports but thought I'd help you out (or maybe I'm just an idiot).

The first issue is that when you've specified a favicon in the config:

...
favicon: path.join(__dirname, 'src/file/favicon.ico'),
....

Along with:

output: {
  path: path.join(__dirname, 'public'),
  filename: '[contenthash].js',
  publicPath: '/',
  libraryTarget: 'umd',
  clean: true,
},

It seems as if html-webpack-plugin is loading the favicon before webpack is cleaning itelf, so webpack will keep wiping out the favicon right after it's been injected with this plugin, you can see it popping up in the directory and then disappearing again.

It can be fixed with:

clean: {
  keep: /favicon.ico/,
},

But it still seems like something this plugin should automatically pick up on (if possible).

The other issue is that when I run webpack with:

config.watch = true
config.watchOptions = {
  aggregateTimeout: 200,
  poll: 1000,
  ignored: /node_modules/,
  followSymlinks: true,
}

It seems that when html-webpack-plugin writes the index.html file it triggers a file change event, which makes webpack recompile itself, then triggers a rebuild of index.html, which then again triggers a new file event, over and over and infinitely recompiles everything.

webpack compiled successfully
webpack compiled successfully
webpack compiled successfully
webpack compiled successfully
webpack compiled successfully

In a matter of 1 second.

I've also tried to update the clean to:

clean: {
  keep: /\.(ico|html)/,
},

Thinking maybe that helps but no luck.

Also tried adding it to ignored:

config.watchOptions = {
  aggregateTimeout: 200,
  poll: 1000,
  ignored: /.*\.html/, // ['**/*.html']
  followSymlinks: true,
}

But it seems like that gets completely "ignored".

I'm not sure if I'm just being an idiot, but been a struggle getting this plugin working with file watching/recompiling/cleaning.

EDIT: After a lot more trial and error I don't think this --watch issue has anything to do with this package, I think it's webpack itself that's broken. I've removed just about everything there is to remove and as soon as you use watch and make the first file change it will infinitely recompile itself over and over and no ignore or ignore plugins work (they all just get ignored).

EDIT2: I've pinpointed this down to being either a webpack or a ts-loader issue, when you have "composite": true in tsconfig.json it will cause webpack to infinitely recompile itself, just disabling composite makes everything work as expected. So this issue can be closed but hopefully that helps someone else ever discovering this in the future. At first it seemed like it was html-webpack-plugin causing it but I think it has nothing to do with this plugin.

[jantimon]

Thanks for all your input :)

Can I close this issue?