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:
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.