Enable using a remote url for filename field

[yishay-at-bay]

Feature Proposal

I want to have the output html file in production with a link tag for the css asset that looks something like that <link href="https://some-cdn-url/main.026ea848882c3b721917.css" rel="stylesheet"> where the main.026ea848882c3b721917.css is the regular hashed asset name and https://some-cdn-url is some address that holds the css (I will take care to the part that puts the asset there)

I'm using MiniCssExtractPlugin in production so I tried using the filename option to do that But with the filename option no matter what value I'm giving it, the output in the html file will always start with a slash. It also translates some of the chars. So if I put

new MiniCssExtractPlugin({
  filename: 'https://some-cdn-url/[name].[contenthash].css',
}),

I get <link href="/https%3A//some-cdn-url/main.026ea848882c3b721917.css" rel="stylesheet">

With / at the beginning and the : turns into %3A Is it possible to enable the filename field to have any kind of string, including some external url?

Feature Use Case

Please paste the results of npx webpack-cli info here, and mention other relevant information

[alexander-akait]

Sorry, not related to the filename option, you can't use URL here, please use https://github.com/webpack-contrib/mini-css-extract-plugin?tab=readme-ov-file#publicPath, i.e. publicPath: "https://some-cdn-url/"

[yishay-at-bay]

@alexander-akait thanks for answering But I didn't understand how can I use publicPath to solve the use case I described

Because, like it says in the docs you linked to publicPath Specifies a custom public path for the **external resources** like images, files, etc **inside CSS**

And this is indeed what it does when I try this, it assigns the public path that I give it to resources inside the css file like fonts or images, like this for example url(https://some-cdn-url/28907e5b0995e649cc46.jpeg) (this is inside the css file)

but the href to the css file itself in the html file stays the same href="/main.026ea848882c3b721917.css"

I need to change the address for the css file itself, so the link tag inside the html file will include <link href="https://some-cdn-url/main.026ea848882c3b721917.css" rel="stylesheet">

So I'm not sure, am I missing something with the publicPath? Can you give me an example of how I can achieve that with it?

[alexander-akait]

How you create <link>? Do you use html-webpack-plugin?

[yishay-at-bay]

Yes I'm using the html-webpack-plugin for the html template Do you have a solution with that?

[alexander-akait]

@yishay-at-bay Can you provide reproducible test repo, I will look