Configure HtmlWebpackPlugin to ignore template parameters

I’m writing a small Vue application for configuration of an embedded system. The embedded system is running its own lightweight HTTP server which, on one particular page, performs some server side rendering before serving the page.

The page needs to define two template parameters which get set by the server. Here is an example page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  </head>
  <body foo="<%=foo%>" bar="<%=bar%>">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Here, the body attributes “foo” and “bar” are set by the server, but they use the same template parameter notation as the HtmlWebpackPlugin. This is causing issues with the HtmlWebpackPlugin during the build. The output file specifies the error as follows:

Html Webpack Plugin:
<pre>
  ReferenceError: foo is not defined
  
  - index.html:17311 
    C:/example/public/index.html:17311:10
  
  - index.html:17316 4330.module.exports
    C:/example/public/index.html:17316:3
  
  - index.js:284 
    [example]/[html-webpack-plugin]/index.js:284:18
  
</pre>

I’ve explored the HtmlWebpackPlugin docs which led me to:

  • Set the “showErrors” option to false which changed the output to just “ERROR”
  • Set these parameters via the “templateParameters” option which results in “BASE_URL” to be undefined

Is there any way I can configure the HtmlWebpackPlugin to ignore the template parameters that are set by the server? This is my first experience with Webpack so I apologise if I’ve misunderstood anything here.

I don’t have a Webpack solution for you, but as an alternate solution, can you not just apply these attributes before you return the html from the server?

Thanks for the fast reply. I don’t understand completely what you mean. For more context; the attributes are server-side variables which define the current stage of the firmware update process. My plan is to access these attributes in the Vue app via getAttribute() to display relevant content. I’m not sure if this is an elegant solution to do this but it’s the best I could come up with.

What I mean is that everything comes from the server. When a client hits your website/app they have to make a request to the server. The initial request the client makes when they hit your server is returning the html their browser will use to render the page. So, what you can do is intercept the response on this request and inject the attributes you need into the html. This way you don’t have to worry about how Webpack compiles your code that has erroneous attributes (in it’s eyes).

Another option is to take a similar method, but instead of attaching attributes to the body, you inject a script with a global object that you can then reference in your app.

As for the Webpack route, have a look at the html-loader which should allow you to customize which attributes get analysed.

1 Like

Thanks very much for your help! I ended up injecting a script with a global object, it was a much cleaner solution and didn’t require any changes to the Webpack config.

1 Like