how to make auto reload work when HMR enabled

Question

I've been trying multiple times to configure webpack. Everytime I start the process, auto reload works fine all the way, until I enable --hot for web-dev-server, then any change to the html has no impact, no errors, nothing, just a log in terminal that there's been a change, and a log on browser console that there's nothing to update. Hot reload works fine for CSS and JS, and I understand HTML doesn't support HMR but at least expected auto refresh to keep working ...

My configuration below:

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

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hello world',
            template: 'src/views/index.html',
            alwaysWriteToDisk: true
        }),
        new HtmlWebpackHarddiskPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        inline: true,
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                'css-loader',
            ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ]
            }
        ]
    }
};

My scripts in package.json

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js",
    "prod": "cross-env NODE_ENV=production webpack -p --config         webpack.config.js"
},

Haven't tested this but try [reload-html-webpack-plugin](https://github.com/andrewcoelho/reload-html-webpack-plugin) — andykenward, Oct 22 '17 at 14:13
Thanks, I've tried the above as many other solution but every time the auto-reload starts working again I lose HMR on CSS (assuming also JS, haven't tested yet). I'd like to have auto-reload on html, and HMR on CSS and JS. — joeyj, Oct 22 '17 at 16:34

score 0 · Answer 1 · answered Nov 12 '17 at 19:57

I am not sure if this is the "right" way to achieve it. But this is working for me with the following amends.

devServer: {
    **contentBase: resolve('src/views'),**
    open: true,
    hot: true,
    stats: "errors-only",
    overlay: true,
    **watchContentBase: true**
},

This does not seem to make sense to me but, if you set watchContentBase to true and point the contentBase to "dist", you lose HMR and any changes (event to css/js files) will cause a full reload which is not what I was aiming for.

my src structure below:

/ src
- images
- js
- sass
- views

I had also a look at vue-cli which seems to suffer from the same issue. Any changes to the index.html are not reflected (does not trigger a full page reload).

how to make auto reload work when HMR enabled

1 Answers1