Same link added twice

[jeremytenjo]

mini-css-extract-plugin injects <link href="/css/main.bundle.css" rel="stylesheet" /> to the html on buildtime.

When I load preload-webpack-plugin after mini-css-extract-plugin, preload-webpack-plugin injects <link as="style" href="/css/main.bundle.css" rel="preload"> to the head as expected, but now I am left with 2 calls to the same file.

is there a way to remove <link href="/css/main.bundle.css" rel="stylesheet" /> injected by mini-css-extract-plugin?

[JayKan]

The issue with the 2 calls was because <link as="style" href="/css/main.bundle.css" rel="preload"> is missing the crossorigin tag. If you have manually added the tag after your build, you should see 1 call instead of 2

[JayKan]

There's a similar issue with #98

[jeffposnick]

<link href="/css/main.bundle.css" rel="stylesheet"> is not equivalent to <link as="style" href="/css/main.bundle.css" rel="preload">

If <link href="/css/main.bundle.css" rel="stylesheet">, inserted by mini-css-extract-plugin, instructs the browser to start downloading /css/main.bundle.css and once the download is finish, parse and apply the CSS specified.

<link as="style" href="/css/main.bundle.css" rel="preload">, inserted by preload-webpack-plugin, is an instruction to the browser to download /css/main.bundle.css and keep it in a short-term cache, ready to be used later on in the page's lifecycle.

If you already have <link href="/css/main.bundle.css" rel="stylesheet"> in your HTML, and you're fine with it being loaded and applied right away, then there's no reason to also preload that resource. Preload is only useful if you want to start a download early, and then wait until some later point in the page's loading process to actually apply the result of that download.

So, in short, for the use case you describe, I don't think you should be using preload-webpack-plugin to preload that CSS.