jantimon / jantimon/html-webpack-plugin
HtmlWebpackPLugin ignores Rule.generator.publicPath value
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.3k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
## 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
```javascript
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 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
```javascript
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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running the reproduction in webpack.config.js with webpack 5.65.0 and html-webpack-plugin 5.5.0, then inspect how HtmlWebpackPlugin handles the configured assets. Done means the generated HTML uses each asset's Rule.generator.publicPath for its script src or stylesheet href instead of relying only on output.publicPath or the plugin option.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100