jantimon/html-webpack-plugin

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