How to watch index.html using webpack-dev-server and html-webpack-plugin

Question

I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not rebuild again. I know the index is not in the entry, but is there a way to solve this?

Answer 1

The problem is that index.html is not being watched by Webpack. It only watches those files that are "required" or "imported" somewhere in your code and the loaders are testing for.

The solution has two parts.

First require the index.html file in your entry point. Technically, you can require it anywhere in your application, but this is pretty convenient. I'm sure you could also just require your template if you were using a template with your html-webpack-plugin.

I required my index.html in my index.js file, which is my entry point:

require('./index.html')
const angular = require('angular')
const app = angular.module('app', [])
//...so on and so forth

Finally, install and add the raw-loader with all of your other loaders, to your Webpack config file. Thus:

{
   test: /\.html$/,
   loader: "raw-loader"
}

The raw loader will convert just about any file that is "required" into a string of text and, then, Webpack will watch it for you and refresh the dev-server every time you make a change.

Neither Webpack, itself, nor your program will actually do anything with the index.html file (or template) at the stage in which it is loaded. It's completely unnecessary for your production or testing environments, so just for good measure, I only add it if I'm running the development server:

/* eslint no-undef: 0 */

if (process.env.NODE_ENV === 'development') {
  require('./index.html')
}

const angular = require('angular')
const app = angular.module('app', [])
//...so on and so forth

In theory you can "require in" a bunch of other static html files you'd like it to watch. ...or text files for that matter. I use the raw-loader, myself, for Angular directive templates, but I don't have to add those to the beginning of my entry point. I can just require inside the directive template property, like this:

module.exports = function(app) {
  app.directive('myDirective', function(aListItem) {
    return {
      template: require('./myTemplate.html'),
      restrict: 'E',
      controller: function($scope) {
        $scope.someThingThatGoesInMyTemplate = 'I love raw-loader!'
      }
    }
  })
}

Answer 2

Simply add watchContentBase: true to your devServer's config. webpack-dev-server will watch for changes in all files that are located in contentBase dir. Here we watch all files inside ./src

webpack.config.js:

...
 devServer: {
   port: 8080,
   contentBase: './src',
   watchContentBase: true

} 

Answer 3

If you are building it using just npx webpack --watch, you can set cache to false to generate the file everytime.

new HtmlWebpackPlugin({
  cache: false,
})

Read this link for further customisation, htmlwebpackplugin.

Answer 4

Another solution is to use file-loader to import html file at the entry javascript file.

import 'file-loader!../templates/index.html';

You can have your html-webpack-plugin configuration as usual

plugins: [
 new HtmlWebPackPlugin({
  template: path.resolve(__dirname, 'src/templates/index.html'),
  filename: path.resolve(__dirname, 'dist/index.html'),
  files: {
   css: ['style.css'],
   js: ['main.js'],
  }
 })
]

This does not write anything to the disc when webpack-dev-server is running