Html-webpack-plugin: No refresh on changes in sub templates

Created on 9 Oct 2018 · 16Comments · Source: jantimon/html-webpack-plugin

Description

I have other sub templates which I am including in my main index.html. The screen doesn't refresh on changes in any of the subtemplates.

However it refreshes (all files) if I change something in index.html.

Config

I'm using it inside unejected CRA v2 ([email protected])
I have added html-loader as the dev dependancy

index.html file:

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <%= require('html-loader!./test.html')%>
  <div id="root"></div>
</body>

test.html file:

<script type="text/template" id="testting">
    <div><%=name%> is the asa</div>
</script>

Relevant Links

Repro repo

Environment

Node.js v8.12.0
linux 4.15.0-36-generic
[email protected]
[email protected]

Source

Aftabnack

👍1

All 16 comments

The reason might be a bug here:

https://github.com/jantimon/html-webpack-plugin/blob/bb17284818258e805204b90abb8068bc30b89147/lib/compiler.js#L353-L375

Maybe the childCompiler.fileDependencies does not include test.html.

Could you please add a console.log to your node_modules/html-webpack-plugin/lib/compiler.js to find out?

jantimon on 15 Oct 2018

I will check that out now and update.

Aftabnack on 15 Oct 2018

🎉1

@jantimon Yes! That is indeed the case. Only index.html is in the fileDependencies.

Aftabnack on 15 Oct 2018

Maybe @sokra can help out here.
@sokra shouldn't file dependencies be added here?

jantimon on 15 Oct 2018

Yes it should be in fileDependencies

sokra on 15 Oct 2018

@sokra @jantimon Do you want me to file an issue in webpack's repo?

Aftabnack on 15 Oct 2018

Maybe we can build a minimal reproduction example

jantimon on 17 Oct 2018

@jantimon I have already made it while raising the issue itself. It was part of the template.
Check the OP above. I've made a very minimal repro.

Aftabnack on 17 Oct 2018

I rather tough about an example without the html webpack plugin.

Just webpack, a minimal apply function plugin which starts a child compiler and a sub dependency.

So the webpack team can trace down the child compiler bug

jantimon on 17 Oct 2018

👍1

@Aftabnack I opened a ticket for this issue: https://github.com/webpack/webpack/issues/8245

jantimon on 19 Oct 2018

🎉1

I was able to fix this problem by replacing this line:

https://github.com/jantimon/html-webpack-plugin/blob/65879ebe5061d821c9cbc9639915d855a612851b/lib/compiler.js#L148

with this one:

this.fileDependencies = Array.from(childCompilation.fileDependencies);

https://github.com/jantimon/html-webpack-plugin/blob/65879ebe5061d821c9cbc9639915d855a612851b/lib/compiler.js#L212-L225

This code only extracts dependencies from the entry modules so file dependencies of dependencies of these modules are not tracked.

sokra on 21 Oct 2018

@jantimon - I can confirm that this change made it work. Would you like a PR?

@sokra, @jantimon - Thanks for the swift resolution, is there any place where I could understand the internal workings of webpack?? Probably a code annotated read?

I would like to be able to contribute to webpack ecosystem.

PS: For a second, it seemed to have slowed the dev startup a little, it works as fast before now.

Aftabnack on 22 Oct 2018

@jantimon Any updates on when this will get merged?
I didn't see a PR for this yet, even though we know the solution.
Is there anything else needed from my side?

Aftabnack on 8 Nov 2018

Sure - do you have time to prepare a pull request?

jantimon on 8 Nov 2018

On it! Right away.

Aftabnack on 8 Nov 2018

@jantimon Is it possible to make another beta release with this change if the 4.x stable is going to take longer? Looking forward for this one!!

Aftabnack on 29 Nov 2018

Was this page helpful?

0 / 5 - 0 ratings