Magic Comments not working for images

[aubreyquinn]

I am trying to preload/prefetch an image so that I don't have to be connected to the internet at the exact moment to display the image. It's for a "you are offline" page in my app.

I was reading online that the webpack magic comments feature might be able to do that.
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

It's not working for me.

Bug report

The image that I am trying to preload/prefetch does not show and there is no <link rel tag added to the DOM.

If the current behavior is a bug, please provide the steps to reproduce.
Checkout the demo repository here:
https://github.com/aubreyquinn/preload-webpack-demo/tree/main

What is the expected behavior?
I should be able to pre-fetch an image and have the link rel tag added to my DOM.

Other relevant information:

  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

[alexander-akait]

It should be implemented by HtmlWebpackPlugin, webpack generate links only for JS assets

[aubreyquinn]

Hi @alexander-akait ! That's great! Thank you! Do you have a small code sample of how to do that with the plugin?

[alexander-akait]

No, it should be implemented by an author of the plugin

[LP1994]

What you may need is this plug-in: https://github.com/principalstudio/html-webpack-inject-preload.

[LP1994]

It also supports "rel='prefetch '".

[alexander-akait]

I asked @jantimon (jantimon/html-webpack-plugin#1768 (comment)) to mvoe html-webpack-plugin to webpack-contrib to I will fix a lot of issues and implement such things

[icy0307]

Hi
I notice that only js files are getting preloaded. Other resources like CSS required by the preload chunk are not being preloaded. Is it a bug or feature? @alexander-akait

[icy0307]

jantimon/html-webpack-plugin#1317
@aubreyquinn I create a PR that supports entry point preload that might suit your need.

[alexander-akait]

@icy0307 Yeah, we should improve it in html-webpack-plugin

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.