Magic Comments not working for images

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

[alexander-akait]

I asked @jantimon (https://github.com/jantimon/html-webpack-plugin/issues/1768#issuecomment-1270227968) to mvoe html-webpack-plugin to webpack-contrib to I will fix a lot of issues and implement such things