HtmlWebpackPLugin ignores Rule.generator.publicPath value
simple-russia opened this issue · 2 comments
Current behaviour 💣
I have a CSS asset main.css
, 2 js assets vendor.js
and index.js
that my HtmlWebpakPlugin injets into html document. I have to enter the speific publicPath
. It works via webpack's output.publicPath
or as an option inside new HtmlWebpackPlugin(options)
. All works great but the thing is, i have to import one of the JS files from another public path. So, suppose i have to import main.css
and main.js
from https://cdn-1.com/assets
and vendor.js
from https://cdn-2.com/assets
. To ahieve this, i decided to use Rule.generator.publichPath
which can give specifi publicPath
to assets that satisfy the test: regex
condition. So this is my webpack config:
webpack.config.js
modules.exports = {
output: {
....
publicPath: "https://cdn.mysite.com/",
}
...
module: {
rules: [
{ // first rule
test: /(main\.css|index\.js)$/,
generator: {
publicPath: "https://cdn-1.com/assets",
}
},
{ // second rule
test: /vendor\.js$/,
generator: {
publicPath: "https://cdn-2.com/assets",
}
},
]
}
...
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
minify: true, // minify HTML
}),
],
}
Html plugin totally ignores Rule.generator.publicPath
variable and works only with output.publicPath
(whether even if i have it or not, it still ignores Rule.generator.publicPath
, even if i use public path inside HtmlWebpackPlugins options.
Expected behaviour ☀️
I would like that Rule.generator.publicPath
is taken in account Rule.generator.publicPath
when rendering an html document so all the and <script> elements have their src
/href
attributes exactly what i put inside Rule.generator.publicPath
which adds more flexibility as to where to serve my assets from. I am not sure there are any ways to add specific public path to some certain assets using html document renderer of this plugin.
Reproduction Example 👾
webpack.config.js
modules.exports = {
output: {
....
publicPath: "https://cdn.mysite.com/",
}
...
module: {
rules: [
{ // first rule
test: /(main\.css|index\.js)$/,
generator: {
publicPath: "https://cdn-1.com/assets",
}
},
{ // second rule
test: /vendor\.js$/,
generator: {
publicPath: "https://cdn-2.com/assets",
}
},
]
}
...
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
minify: true, // minify HTML
}),
],
}
Environment 🖥
Node.js v14.17.3
win32 10.0.19042
npm version 6.14.13
webpack@5.65.0
html-webpack-plugin@5.5.0
you are absolutely right
that sounds like a useful feature
could you please create a PR for it?
I am sorry, i am new to github and i don't know what to do. If it's about a Pull Request, i don't know how to code this feature