Is anything truly possible with webpack?

[andrewcoelho]

In another place, you mentioned

If I've learned anything about webpack, the answer is always yes. It's just a matter of how :)

With that in mind, I'm struggling with what would seemingly be an easy thing to do.

Using html-webpack-plugin and webpack-dev-server, I can't get it to reload changes to my Jade templates no matter what I do.

I've even imported the Jade template into my entry point, and when I modify it, I see all the appropriate logs in the console, but the browser never renders the updates.

According to this issue, it seems like this isnt possible with webpack currently.

So my question stands, is anything truly possible with webpack? And if so, why not this?

Thanks!

[kentcdodds]

Hi @andrewcoelho! I'm sure this is still possible. I'm not sure how, but let me ping @TheLarkInn :)

Also, I've never needed this feature because I generally don't have a very big template for my index.html so I'm not making changes in there often... Is there a reason you need this?

[andrewcoelho]

Hey Kent, thanks for getting back to me on this!

The use case here is when using webpack with static sites where something like react isn't brought in, and instead all the view markup lives in jade or hbs files or whatever.

It's great to switch out a huge gulp/browserify setup for a simple webpack config :).

Also, I think this could be useful even if you are using react but only rendering to portions of your view instead of using it for the entire view.

Thanks!

[TheLarkInn]

Aww got to it first I have a half completed answer on my computer!!! But I'm appreciative of your answer I was going to focus on how "webpack does all the things"

[kentcdodds]

@TheLarkInn, I think that @andrewcoelho would actually like a real answer from you :)

[TheLarkInn]

Of course @kentcdodds. @andrewcoelho so first thing admittedly HMR is my least strongest suit however if you have maybe a repo I could dive into I could figure out what is not triggering the refresh. You are right in that issue where html-webpack-plugin treats the index.html as a child chunk entry which has its own compiler, child compiler have some specific needs that need to be applied for HMR support (IE each child compiler has its own cache). I will talk with @jantimon and see if he has any insight tomorrow.

In terms of 'can webpack do anything?' Id like to go into detail about the building blocks of webpack here separately. Ofcourse if @andrewcoelho think it's relevant or something you are interested in.

@kentcdodds my 'real' answer was me diving deep on Tapable in a way to explain the super dynamic plugin system tl;dr

[kentcdodds]

I'm fairly certain that @andrewcoelho wasn't asking about how to reload the templates with HMR, but rather to just not have to restart the server when he changed those templates that the html-webpack-plugin is using.

[andrewcoelho]

@kentcdodds @TheLarkInn actually the dev server restarts just fine, and emits all the appropriate logs to the browser console, including the name of the template that was updated.

The only problem I'm having is that the browser never actually renders the updates.

You can see the repo where I'm having this problem at https://github.com/planetary/airframe/tree/enhancement/webpackify?files=1. (the only thing is I had to import the template into the entry point to get all the updates to be emitted, which isn't included here).

[jantimon]

Webpack is a compiler which compiles files to a javascript bundle e.g. bundle.js.
The html-webpack-plugin is an addition which uses the meta data provided by webpack and generates a html file for you.

Hot module replacement is also just an addition to the javascript compiler.. but as none of the html-webpack-plugin content will show up in your bundle.js there is no built in way to handle the hot-module-reloading.

The html-webpack-plugin detects changes and you can easily reload the browser by your own.

If that's not enough and you really love to get the hot-html-coding you can easily write a hot-html-webpack-plugin which hooks into the html-webpack-plugin events and a client script which handles the updates. This client script can be added to the webpack compilation using the SingleEntryPlugin or also using the html-webpack-plugin events..

If doing so make sure that you use a smart diff algorithm and handle incomplete html correctly.

[kentcdodds]

Thank you for your help @jantimon!