index.html disappear with watch mode (HtmlWebpackPlugin)

Bug report

What is the current behavior? Hi, I’m brand new to webpack, just wanted to say that I observed what I believe is a bug. Following the guides in order (getting started, asset management, output management, and now development).

In the development guide, we install the watch (npm) script.

I noticed that when I run npm run watch, the ./dist/index.html file disappear.

I suppose this is not the normal behaviour of the HtmlWebpackPlugin plugin, because if I now run npm run build (which calls the webpack binary without the watch option), then the ./dist/index.html is re-created again.

So to sum up, I would think that there is a problem with the HtmlWebpackPlugin in watch mode, it doesn’t recreate the index.html file in the dist directory.

Here is my webpack and npm configurations:

webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    entry: {
        app: './src/index.js',
        print: './src/print.js',
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "Output Management",
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

npm

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.2",
    "csv-loader": "^3.0.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "style-loader": "^1.1.4",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

If the current behavior is a bug, please provide the steps to reproduce. follow the guides in order

What is the expected behavior? npm run build and npm run watch should behave the same no matter what the plugins are.

Other relevant information: webpack version: 4.43.0 Node.js version: v12.16.1 Operating System: mac osX 10.14.6 Additional tools:

[marques-work]

@lingtalfi I faced this issue as well, and I think I’ve fixed it.

Setting cache: false in the config options is what worked for my case.

The behavior of cache: true is:

Emit the file only if it was changed

The clean-webpack-plugin was removing the HTML file during rebuilds, and html-webpack-plugin would not rebuild it unless I made a change to the template itself.

I found the cache option in the docs, which defaulted to true; the documented behavior of this option matched my observations. Setting it to false ensured that my HTML file was rebuilt every cycle in watch mode.

Hope that helps someone.

[KonstantinBalanchuk]

@marques-work

Thanks man!