How do you disable SSI being resolved during compilation in a vue-cli / webpack project?

Question

I have a vue 2.6 application created with vue-cli though some trial and error...

I want to make it possible to deploy the same project bundle and use SSI (server side includes) to load a per-deployment configuration into it. However, it seems that when building for deployment, the SSI directives get resolved using local files instead of being executed by the web server.

The relevant part of index.html is:

<!-- #block name="fallback" -->{"error":"SSI include failed"}<!--# endblock -->
<pre id="XXX_config" style="visibility: hidden"><!--# include file="config.json" stub="fallback"--></pre>
<script>
  window.XXX_config = {};
  try {
    const configElm = document.getElementById("XXX_config");
    const json = configElm.innerHTML.trim();
    if (!json || json.startsWith('<!--' + '# include')) {
      console.debug('No local config');
    } else {
      console.debug('Loaded config.json');
      window.XXX_config = JSON.parse(json);
    }
  } catch (e) {
    console.warn('Failed to parse local config', e);
  }
  console.log('config:', window.XXX_config);
</script>

but after building, the <--# foo --> tags are gone and the #XXX_config element contains {"error":"SSI include failed"}.

What is doing this replacing and how do I stop it?

I presume it is webpack or one of its loaders but I don't see any suspects in my pnpm-lock.yaml file, let alone the package.json file.

As an aside, if I manually put the SSI tags back into the index.html file then it works as I intended, as far as I've gotten with it.

Answer 1

OK, I was expecting too much magic from webpack when diagnosing this issue and before posting the question.

Yes, webpack is messing with my index.html file, but it is simply removing the comments and leaving the content of the fallback block naked in the HTML file. I simply disabled removal of comments in the webpack config to make it stop doing that.

Since this is a vue-cli project (probably depending on version and how it was created), I can't just edit a webpack config file but have to mutate the webpack config.

What worked for my setup was:

module.exports = {
  configureWebpack: config => {
    for (const plugin of config.plugins) {
      const opts = plugin.options;
      if (opts && opts.filename === 'index.html' && opts.minify != null) {
        opts.minify.removeComments = false;
      }
    }
  },
  // the rest of your config goes here
};