Html-webpack-plugin: index.html disappear with watch mode (HtmlWebpackPlugin)

[webpack-bot]

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:

---

This issue was moved from webpack/webpack#10761 by @evilebottnawi. Original issue was by @lingtalfi.

[alexander-akait]

This is another issue with the cache option.

@jantimon In the past, I described a solution, here alternative example of caching child compilations https://github.com/webpack-contrib/worker-loader/blob/master/src/supportWebpack4.js#L3, please fix it

[ahmedElghandour1]

This issue happens to me sometimes and requires me to run npm run watch again when index.html is deleted.

[josephspurrier]

I'm having this issue as well - here is my webpack.config.js: https://github.com/josephspurrier/goreactapp/blob/master/src/app/ui/webpack.config.js

Here is the NPM command I run to start the watching of webpack: https://github.com/josephspurrier/goreactapp/blob/master/src/app/ui/package.json#L7

I will make changes to the javascript files and the reloading will work for 5-10 minutes, and then I will receive a 404 on my web server because the index.html file is missing.

Here is with the index.html file missing after a few changes:

Here is with the index.html file in place after a restart:

[jantimon]

fixed in [email protected]

[jantimon]

fixed in html-webpack-plugin 5.0.0