Webpack HMR does not reload html

Question

Minimalistic repository for problem testing

I have the simplest project structure now:

  root
    |-src
    --|index.pug
    --|--styles.css
    --|--app.js
    |-public
    --|--img

Packages:

"devDependencies": {
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "pug": "^2.0.0-beta6",
    "pug-loader": "^2.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

In app.js I just require the styles and use app.js as an entry in webpack.config.js, which looks like this:

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

let src = {
    app: path.resolve(__dirname,'src', 'app.js'),
    public: path.resolve(__dirname, 'public'),
    html: {template: path.resolve(__dirname, 'src', 'index.pug')}
}

module.exports = {
    resolve: ['', '.js', '.css', '.pug'], // tried with or without it. Change nothing
    entry: src.app,
    output: {
        path: src.public,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                query: {
                    pretty: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index.html',
            template: src.html.template
        })
    ],
    devServer: {
        contentBase: src.public
    },
    devtool: 'sourcemap'
}

Run webpack-dev-server: webpack-dev-server --hot --inline

After that I got nice hot replacement for css, but not for html. When I change my index.pug template file I got some console messages depends on required pug-template in app.js or not.

File app.js (webpack entry point)

    // without requiring template got: 
    //[WDS] App updated. Recompiling... [WDS] App hot update...
    // and nothing happens
/*
When template required I got these messages:

[HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:18
hotApply @ bootstrap f3d9aa9…:390
hotUpdateDownloaded @ bootstrap f3d9aa9…:303
hotAddUpdateChunk @ bootstrap f3d9aa9…:283
webpackHotUpdateCallback @ bootstrap f3d9aa9…:4
(anonymous) @ 0.f3d9aa9….hot-update.js:1
dev-server.js:19[HMR] Error: Aborted because 83 is not accepted
    at hotApply (http://localhost:8080/bundle.js:391:31)
    at hotUpdateDownloaded (http://localhost:8080/bundle.js:304:13)
    at hotAddUpdateChunk (http://localhost:8080/bundle.js:284:13)
    at webpackHotUpdateCallback (http://localhost:8080/bundle.js:5:12)
    at http://localhost:8080/0.f3d9aa9823a803392473.hot-update.js:1:1
And page reloads by refreshing. 
*/
    require('./index.pug'); 

    require('./styles.css');

With pure html instead of pug is the same. How it could be fixed?

score 1 · Answer 1 · answered Feb 13 '17 at 23:03

1

Are you using IDE? For Intelij: Settings ▶︎ System Settings ▶︎ Synchronization ▶︎ disable safe write. Maybe its help to you. Thanks

answered Feb 13 '17 at 23:03

Влад Кискин

15
4

No. Safe write is not the reason. – Maksim Nesterenko Feb 13 '17 at 23:06

score 1 · Answer 2 · answered Apr 29 '17 at 21:56

I am not sure what is wrong with your setup but it generally should work. Here is a minimalistic webpack config where both html and css injection with HMR does work. Hope it helps:

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

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: false,
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
};

Webpack HMR does not reload html

2 Answers2