When using favicon + output.clean + webpack-dev-server, the second compile loses the favicon

Current behaviour 💣

When using a favicon, `output.clean = true, and webpack-dev-server, the favicon is available after startup compile, but after the second compile it is no longer served (404 error).

Expected behaviour ☀️

My expectation is that the favicon should still be available on subsequent compiles.

Reproduction Example 👾

I have a full example here: https://github.com/hiddenwaffle/favicon-clean . To run: npx webpack serve. The main.js and favicon.ico files are trivial. Below is the webpack config:

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

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: false
  },
  entry: './main.js',
  output: {
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      favicon: 'favicon.ico'
    })
  ]
}

As a workaround, I can comment out contentBase: false which allows webpack-dev-server to serve the favicon from the file system. Another workaround is that I can move the clean to a production-only config.

I tried looking around the html-webpack-plugin to see if I could find anything. I noticed that if I commented out these lines in the html-webpack-plugin index.js file, things seemed to work (obviously not a good fix but hopefully it helps with understanding the nature of the issue):

          // If the template and the assets did not change we don't have to emit the html
          const newAssetJson = JSON.stringify(getAssetFiles(assets));
          // if (isCompilationCached && options.cache && assetJson === newAssetJson) {
          //   previousEmittedAssets.forEach(({ name, html }) => {
          //     compilation.emitAsset(name, new webpack.sources.RawSource(html, false));
          //   });
          //   return callback();
          // } else {
            previousEmittedAssets = [];
            assetJson = newAssetJson;
          // }

I also saw that the function that emits the favicon run only once (on startup), and that makes me think that the reason it works when cleaning is off is because the webserver still has a copy. Perhaps the favicon should be emitted as many times as the index.html is?

Environment 🖥

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
npm --version
npm ls webpack
npm ls html-webpack-plugin
Node.js v14.15.4
darwin 19.6.0
7.5.2
favicon@ /Users/jimmy/dev/study/webpack/favicon
├─┬ html-webpack-plugin@5.3.1
│ └── webpack@5.35.0 deduped
├─┬ webpack-cli@4.6.0
│ ├─┬ @webpack-cli/configtest@1.0.2
│ │ └── webpack@5.35.0 deduped
│ └── webpack@5.35.0 deduped
├─┬ webpack-dev-server@3.11.2
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@5.35.0 deduped
│ └── webpack@5.35.0 deduped
└─┬ webpack@5.35.0
  └─┬ terser-webpack-plugin@5.1.1
    └── webpack@5.35.0 deduped

favicon@ /Users/jimmy/dev/study/webpack/favicon
└── html-webpack-plugin@5.3.1

Please let me know if there is more I can do to help.

[sgerace]

Any update on this issue? Seems like it might be related to #1709.

[Bessonov]

activity