WebPack bundle variables

Question

I'm developing a "widget" and I'm using Webpack, and everything is working fine so far.

But, at this point I want to be able to offer themes to my users so they can choose which color or position they want for the widget

is there a way to pass this variables to the bundle before being injected?

something like

<script src="http://myAwesomeSite.com/js/bundle.js?theme=red"></script>

Related, https://stackoverflow.com/questions/5292372/how-to-pass-parameters-to-a-script-tag . You can find a couple of hacks there. Maybe one of those would work for you. — Juho Vepsäläinen, Jun 10 '16 at 06:02

score 0 · Answer 1 · answered Jun 05 '17 at 21:35

You can use HTML Webpack Plugin to pass the variables you want to use in your HTML. In this case, you will have to transform your HTML to a template (for instance, to an EJS template by renaming the extension of the file to .ejs).

Then you can place the desired variable as follows:

<script src="http://myAwesomeSite.com/js/bundle.js?theme=<%= htmlWebpackPlugin.options.theme %>"></script>

Finally, your webpack config file list of plugins should include the HtmlWebpack plugin:

plugins: [
    // ...
    new HtmlWebpackPlugin({
      theme: 'red',
      template: './template_name.ejs',
      filename: './new_html_file_created.html'
    }),
    //... 
  ],

WebPack bundle variables

1 Answers1