Html hot update

[vin-ni]

Hello,
is it possible to get the html updated on save?

Thanks!

[jantimon]

Unfortunately that’s not possible because we don’t know which changes to the html are caused by javascript...

But I am open to ideas to solve this

[vin-ni]

Sorry,
i meant the index.html

When I update it, it doesnt reload the page.

[jantimon]

Reloading should be possible however we would need help from the webpack core team to use the webpack-dev-server socket connection

[bebraw]

@vin-ni To "solve" this issue, I developed webpack-add-dependency-plugin. It allows you to make webpack aware of these kind of template files that are indirect dependencies to it and I've used it myself to solve a similar use case.

[jantimon]

Wow @bebraw that's cool - do you think we should use it directly with the html webpack plugin?

e.g.

apply(compiler) {
  const webpackAddDependencyPlugin = new WebpackAddDependencyPlugin({ path: this.options.template });
  webpackAddDependencyPlugin.apply(compiler);

Will it trigger a reload?

Webpack already tracks all files from the html-webpack-plugin as dependencies.

[bebraw]

It’s worth a go. Check the internals of the plugin, it’s not doing much.

…

On 22. Jul 2020, at 18.17, Jan Nicklas ***@***.***> wrote:  Wow @bebraw that's cool - do you think we should use it directly with the html webpack plugin? e.g. apply(compiler) { const webpackAddDependencyPlugin = new WebpackAddDependencyPlugin({ path: this.options.template }); webpackAddDependencyPlugin.apply(compiler); Will it trigger a reload? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[bebraw]

@jantimon Did you find a solution for this in webpack 5?

[jantimon]

I checked the webpack-add-dependency-plugin but unfortunately it won’t help here as all files are already added by the html-webpack-plugin

An auto reload feature would need to be exposed by the webpack-dev-server however there is none :(

[bebraw]

I checked the webpack-add-dependency-plugin but unfortunately it won’t help here as all files are already added by the html-webpack-plugin

Ok, I see.

An auto reload feature would need to be exposed by the webpack-dev-server however there is none :(

Can you open an issue at webpack-plugin-serve describing what you would need? I am not sure if we can do it there but it's worth discussing at least.

[peteluffman]

Not sure if it helps anyone, but I got reloading working with webpack 5 by adding injectClient: true to my devServer config.

[alwxkxk]

With webpack 5,this setting is work for me:

  devServer: {
    hot:true,
    open:true,
    watchFiles: ['src/**/*']
  },

• webpack-dev-server github issue #3881