How do I add a comment in an Aurelia template file that will be stripped out of the compiled page?

I am writing an Aurelia template file and I want to add a comment to it. This is a comment that I want people who read the template file (i.e. my fellow developers) to see. However, I want it to be stripped out upon compilation - I don't want end-users of the web site to be able to inspect the page source and see the text of the comment when they visit the site. How is this done? An ordinary HTML comment () is not stripped out.

What I have tried already

I ctrl-F'd this page: http://aurelia.io/docs/templating/basics for the word "comment". There were zero matches, so if that page provides an answer, it does so without using the word "comment".

Solution

After creating a project with aurelia-cli (in my case TS with Webpack)

You may have any template file (.html) containing something like

<template>
  <!-- this comment is for devs only -->
  <h1>${message}</h1>
</template>

then, to remove the comment/s once compiled (always/conditionally)

Open webpack.config.js
Under module find rules array
Find the html-loader section
Change minimize value to true or base it on build-type production etc

module.exports = ({ production }, { analyze, hmr, port, host }) => ({
  ...
  module: {
    rules: [
      ...
      { test: /\.html$/i, loader: 'html-loader', options: { minimize: !!production /* or just minimize: true */ } },
      ...
    ]
  },
  ...
});

minimize accepts the following type

type minimize =
  | boolean
  | {
      caseSensitive?: boolean;
      collapseWhitespace?: boolean;
      conservativeCollapse?: boolean;
      keepClosingSlash?: boolean;
      minifyCSS?: boolean;
      minifyJS?: boolean;
      removeComments?: boolean;
      removeRedundantAttributes?: boolean;
      removeScriptTypeAttributes?: boolean;
      removeStyleLinkTypeAttributes?: boolean;
    };

thereby enabling finer control.

To read more about it: https://webpack.js.org/loaders/html-loader/#minimize