How to setup HMR for HTML too

[Mohamed Abdelwahab]

I am new to the HMR feature, but I find it really cool and think it could cut down development time considerably.

The first time I saw this feature was in the webpack dev server. The problem is, that the dev server doesn't include the routing that we configure in the normal production express server. This could be solved by running both servers and a proxy, but I think injecting the webpack-hot-middleware in the express server is much more convenient.

Injecting it works without problems, but only for js and css/sass files does HMR really take place. After a lot of research I read that the problem lies within the HtmlWebpackPlugin, as it currently does not support HMR.

So is there any work around. I don't want to give up on this feature and falling back to the webpack dev server has a lot of disatvateges.

Thanks in advance.

Here is my webpack.config.js (dev) file:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',
    entry: {
        main: [
            'webpack-hot-middleware/client',
            './src/client/main.js',
        ]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js',
    },
    target: 'web',
    devtool: 'source-map',
    module: {
        rules: [
            {
                // Transpiles ES6-8 into ES5
                test: /\.m?js$/i,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                // Loads the javacript into html template provided.
                // Entry point is set below in HtmlWebpackPlugin in Plugins 
                test: /\.html$/i,
                use: [
                    {
                        loader: "html-loader",
                    }
                ]
            },
            {
                test: /\.s?[ac]ss$/i,
                use: [
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                    }
                ]
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/i,
                loader: 'url-loader',
                options: {
                    limit: false,
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/views/index.html",
            filename: "./index.html",
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ]
};

[Glen Mailer]

This library only deals with transportation of hot reloading signals between webpack on the client and on the server.

How plugins and applications choose to send these signals is out of our scope.

I suspect in the case of the HTML plugin you’ll need to reload the page. In practice I don’t normally see many changes to the HTML, so this isn’t usually a problem.