Modify HtmlWebpackPlugin's generated script URLs

Question

When using HtmlWebpackPlugin to generate the dist/index.html file, we can use the inject option to automatically create <script> tags for the javascript bundle files:

new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    // ...
})

And get an index.html file that looks similar to:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Webpack App</title>
    </head>
    <body>
        <script src="index_bundle.js"></script>
    </body>
</html>

For server side constraints, I need to add a query string parameter in the generated script source, to make it look like <script src="index_bundle.js?my-parameter=my-value"></script>. I've been looking at the plugin documentation, but I can't find the way to do it.

Is there any option to modify the generated URLs, by appending an string or replacing with a RegEx?

Thanks in advance!

customcommander · Accepted Answer · 2018-11-17 23:22:55Z

3

Have you considered doing that yourself by providing your own template to HtmlWebpackPlugin? It would look something like this:

In webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = () => ({
  entry: './burrito.js',
  output: {
    filename: './burrito_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'lunch.ejs',
      templateParameters: {
        query: '?foo=bar&bar=baz'
      },
      filename: 'lunch.html',
      inject: false,
    }),
  ],
});

In lunch.ejs:

<html>
  <body>
    <% htmlWebpackPlugin.files.js.forEach(function(file) { %>
      <script src="<%= file %><%= htmlWebpackPlugin.options.templateParameters.query %>"></script>
    <% }) %>
  </body>
</html>

HtmlWebpackPlugin will expose a global variable htmlWebpackPlugin for your template to read values from. Cf. https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates

When you run Webpack, it will process your lunch.ejs template and produce lunch.html:

<html>
  <body>
    <script src="./burrito_bundle.js?foo=bar&bar=baz"></script>
  </body>
</html>

edited Nov 17, 2018 at 23:22

answered Nov 17, 2018 at 23:10

customcommander

19.3k6 gold badges70 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carles Capellas Over a year ago

Thanks for the suggestion, but I am not using ejs and I don't want to include it in the solution just to generate the bundle

customcommander Over a year ago

Unless I'm wrong, HtmlWebpackPlugin uses ejs by default so you wouldn't need to include any extra packages. But it is true that you would have to create an ejs template.

Никита Нигматуллин Over a year ago

This solution does not work when you add hash to the filename. You don't know the name of the generated file

Carles Capellas · Accepted Answer · 2018-11-22 16:39:31Z

Based on thedarkone's answer, I provide the resolution for my question:

I added the query parameter in the webpack configuration output parameter (production build only in my case) and use HtmlWebpackPlugin with the default config:

const webpackConfig = merge(baseWebpackConfig, {
    // ...
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].js?my-parameter=my-value'),
    },
    // ...
    new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        // ...
    }
    // ...
}

Since I also need the query parameter in the style links, I also had to modify the ExtractTextPlugin filename parameter in the same way:

// ...
new ExtractTextPlugin({
    filename: 'bundle.[chunkhash].js'
    filename: utils.assetsPath('css/[name].css?my-parameter=my-value'),
})
// ...

Keep in mind that this approach will append the query parameters to ALL of the injected scripts/styles.

thedarkone · Accepted Answer · 2018-11-17 15:28:18Z

1

output: {
    filename: `bundle.js?param=${Math.random()}`
}

This would add the query parameter to bundle.js

The file name would rename as bundle.js though

If you wanted to generate a new file every time, the below would be better suited

output: {
    filename: 'bundle.[chunkhash].js'
}

answered Nov 17, 2018 at 15:28

thedarkone

4123 silver badges10 bronze badges

1 Comment

Carles Capellas Over a year ago

I don't want to change the name of the generated files to bundle. Specially because I am using chunks to split the bundle in different scripts.

Collectives™ on Stack Overflow

Modify HtmlWebpackPlugin's generated script URLs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related