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.
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".
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)
webpack.config.js
module
find rules
arrayhtml-loader
sectionminimize
value to true
or base it on build-type production
etcmodule.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