How to get browser reload when editing html/jade files in webpack

Question

This is part of the code I have in my webpack.config.js

const common = {
  entry: {
    style: PATHS.style,
    app: PATHS.jsComp
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    })
  ]
};

I'm showing you the section where I think the problem is, I don't think you needed the entire code, but it's basically a slightly modified version of this git file

When I run webpack-dev-server everything works. JavaScript and SASS changes do reload the browser but when I change by jade file, the browser doesn't reload. In the terminal I have tried running these variations of webpack-dev-server

webpack-dev-server
webpack-dev-server --inline --hot
webpack-dev-server --inline --hot --colors
webpack-dev-server --inline --hot --colors --content-base app
webpack-dev-server --inline --hot --colors --content-base app --host 0.0.0.0
webpack-dev-server --inline --hot --colors --host 0.0.0.0

None of the above 6 variations get the browser reloading when I made changes to the jade file.

Also, if I remember correctly, after every tutorial I have went through (before finding this setup), the browser never reloaded on html changes.

Is there anything else that I need to install (globaly or otherwise)

Answer 1

According to the documentation , you should do 3 things:

• add an entry point to the webpack configuration: webpack/hot/dev-server.
• add the new webpack.HotModuleReplacementPlugin() to the webpack configuration.
• add hot: true to the webpack-dev-server configuration to enable HMR on the server.

As far as I see, I think the only thing of those 3 that you already did is using the hot: true . I use to run the webpack-dev-server via Gulp, so my configurations stay in a JS object, not in command line arguments.

Try this:

import webpack from 'webpack';

const common = {
  entry: {
    style: PATHS.style,
    app: [
       PATHS.jsComp,
       'webpack/hot/dev-server', `webpack-dev-server/client?http://localhost:3000`
    ]
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" }
    ]
  },
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
      template: PATHS.template, // Load a custom template (ejs by default but can be changed) 
    inject: 'body' // Inject all scripts into the body (this is the default so you can skip it) 
    })
  ]
};

Edit:

After discussing in the comments, I think that my answer does not address your case. I thought you were trying to reload the application after some Jade module (say, some AngularJS component were using import with jade-loader to load a Javascript template string from a Jade file) were changed. But as it turns out, you are trying to reload when your base HTML (well, Jade, but the base of your page) file is changed.

If you are using some modern Javascript framework (React, Angular etc), chances are your base HTML will be very small, and the real thing happens in Javascript.

Anyway, I don't think that your need is currently supported neither by webpack-dev-server or html-webpack-plugin.