webpack-dev-server

[tmctl]

when using with webpack-dev-server, the dev server does not serve the favicon. The asset is emitted and the link is injected, but I do not see the favicon http://localhost:8080/webpack-dev-server.

when setting the same favicon path in HtmlWebpackPlugin, the favicon is then served.

[jantimon]

Can you please help me to reproduce that bug?

[HairyRabbit]

Same issue here. Not work with wds for development. The production build works fine.

I create a test repo for this.

Screenshot:

webpack output:

d:\Workspace\favicons-webpack-plugin-issue-164 (master) (favicons-webpack-plugin-issue-164@1.0.0)
λ npm start

> favicons-webpack-plugin-issue-164@1.0.0 start d:\Workspace\favicons-webpack-plugin-issue-164
> webpack-dev-server --open http://localhost:8080/webpack-dev-server --plugin html-webpack-plugin --plugin favicons-webpack-plugin

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from d:\Workspace\favicons-webpack-plugin-issue-164
i ｢wdm｣: Hash: 4327b9b69fdb956e201f
Version: webpack 4.39.3
Time: 751ms
Built at: 2019-09-06 12:04:02
              Asset       Size  Chunks             Chunk Names
/assets/favicon.png   1.85 KiB          [emitted]
         index.html  224 bytes          [emitted]
            main.js    360 KiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.85 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 17 bytes {main} [built]
    + 18 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.

[jantimon]

wow great reproduction repository! 👍

it is really a quite bad bug in the favicons-webpack-plugin output generation.
instead of generating assets/favicon.png it generates /assets/favicon.png.

[HairyRabbit]

Maybe it happen with the webpackPublicPath value default to '/' when not set outputOptions.publicPath

[jantimon]

Fixed with favicons-webpack-plugin@1.0.2

Can you please give it a try?
(might require a hard refresh in the browser)

[HairyRabbit]

@jantimon It works, thanks

[jantimon]

Thanks for reporting and reproduction 👍👍

[555ea]

@jantimon due to your fix I now end up with <link rel="icon" href="//favicon.png"> in webpack dev server. Config is only prefix: ''
Why is it happening ? Because of line 108 in https://github.com/jantimon/favicons-webpack-plugin/blob/master/src/index.js#L108
I can't set webpackPublicPath to empty string, it will always fallback to '/'
const webpackPublicPath = compilation.outputOptions.publicPath || '/';
That's why in the end I end up with
<link rel="icon" href="${webpackPublicPath}${logoOutputPath}"> to be //favicon.png