Webpack: reload/refresh index.html

I decided to use css flexbox for my next personal project. So I need a quick and convenient way to do some tests with flexbox. Edit html, css, and click on refresh button of the browser. That's the main way to test css in the old days. Apparently, that's annoying and time-consuming.

I need a new way. Webpack is the most impressive package tool I have ever seen. I try to make use of its opt-in css hot reloading feature.

For testing, the html(index.html) and css file need to be changed a lot and watch the reaction. The change of css will show right away after saving the file. But unluckily, webpack do not want to reload index.html for me by default. I have to refresh manually, WTF. I believe there is a way to do that.

Finally, I found the way.

It's somehow simple. Just require(import) the index.html in the javascript entry file(index.js)

import './index.html'; // workround to reload page when index.html changes  

Now webpack will watch the changes of index.html. But the page still does not reload after editing index.html. We need to tell webpack to reload the page if it does not know how to handle hot reloading.

entry: [  
    'webpack-hot-middleware/client?reload=true',
    './index'
  ],

Perfect. Now I can sit down and edit index.html and css files, and webpack will hot reload css and reload the page if index.html changes.

I have pushed a basic kit for trying css features with webpack to github. Check webpack-quick-kit if you are interested.

Luo Gang

Read more posts by this author.