Enable using a remote url for filename field
yishay-at-bay opened this issue · 5 comments
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
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/"
@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?
How you create <link>? Do you use html-webpack-plugin?
Yes I'm using the html-webpack-plugin for the html template
Do you have a solution with that?
@yishay-at-bay Can you provide reproducible test repo, I will look