Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hiddenwaffle opened this issue Apr 22, 2021 · 12 comments Β· Fixed by #1812
Closed

Comments

@hiddenwaffle
Copy link

hiddenwaffle commented Apr 22, 2021

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.

@Bessonov
Copy link

Noticed same behavior.

[...]
		"html-webpack-plugin": "5.3.1",
		"webpack": "5.37.0",
		"webpack-cli": "4.7.0",
		"webpack-dev-server": "3.11.2",
[...]

But build works as expected.

@taraldr
Copy link

taraldr commented Jul 3, 2021

I'm noticing the same behaviour - after a reload caused by changes, .png and .svg are no longer served from http://localhost:8080/webpack-dev-server

"html-webpack-plugin": "^5.3.2",
"webpack": "^5.41.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.0.0-beta.3",

@brunnerh
Copy link

The issue seems to also affect clean-webpack-plugin but when using that instead of output.clean, the favicon can be excluded manually as a workaround:

new CleanWebpackPlugin({
	cleanAfterEveryBuildPatterns: ['!**/favicon.ico'],
}),

@stale
Copy link

stale bot commented Apr 16, 2022

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.

@stale stale bot added the wontfix label Apr 16, 2022
@Bessonov
Copy link

activity

@stale stale bot removed the wontfix label Apr 16, 2022
@sgerace
Copy link

sgerace commented Aug 12, 2022

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

@alexander-akait
Copy link
Collaborator

For me - add testcases from #1709

@alexander-akait
Copy link
Collaborator

Fixed the original problem, we still need to reemit all assets from child compilation, I try to fix it today and make a release

@alexander-akait
Copy link
Collaborator

Fixed in main, want to add a couple test cases and do release

@nk11dev
Copy link

nk11dev commented Aug 2, 2023

Fixed in main, want to add a couple test cases and do release

Hi, is the release with the fix already out? I saw there was only 5.5.3 (2023-06-10) as last release.

@alexander-akait
Copy link
Collaborator

@nk11dev Sorry for delay, release will be tomorrow

@vhiairrassary
Copy link

πŸ‘‹ Can we help on anything for the release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants