title: How can I remove HTML comment in a .vue file?
body: <p>I build a webpack project, to compile my .vue files.</p>
  <p>Then I write some HTML comments in the .vue file, and I build file using webpack, while the mode is &quot;production&quot;.</p>
  <p>But when I browse the project in browser developer tools, I can catch sight of these HTML comments.</p>
  <p>I think that HTML comments can shows up in &quot;development&quot; mode rather than &quot;production&quot; mode.</p>
  <p>And their are my files:</p>
  <p>webpack.config.js:</p>
  <pre><code>const {VueLoaderPlugin} = require('vue-loader');
  const TerserPlugin = require('terser-webpack-plugin');
  const {resolve} = require('path');
  module.exports = {
      mode: 'production',
      devtool: false,
      entry: {
          main: resolve(__dirname, 'src/main.js')
      },
      module: {
          rules: [
              {
                  test: /\.vue$/,
                  use: [
                      {
                          loader: 'vue-loader',
                      },
                  ],
              },
          ]
      },
      optimization: {
          minimize: true,
          minimizer: [new TerserPlugin({
              terserOptions: {
                  ecma: undefined,
                  parse: {},
                  mangle: true,
                  module: false,
              },
          })],
      },
      plugins: [
          new VueLoaderPlugin(),
      ]
  };
  </code></pre>
  <p>App.vue: in /src</p>
  <pre><code>&lt;template&gt;
      &lt;!--cumbrous comment--&gt;
      &lt;!--cumbrous comment--&gt;
      &lt;!--cumbrous comment--&gt;
      &lt;!--cumbrous comment--&gt;
      &lt;!--cumbrous comment--&gt;
      &lt;div&gt;
          this is app
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {};
  &lt;/script&gt;
  </code></pre>
  <p>main.js in /src</p>
  <pre><code>import {createApp} from 'vue';
  import App from './App.vue';
  
  const app = createApp(App);
  app.mount('#app');
  
  </code></pre>
  <p>And this is my package.json:</p>
  <pre><code>{
      &quot;name&quot;: &quot;delete-vue-comment&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;src/main.js&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;webpack --config webpack.config.js&quot;
      },
      &quot;dependencies&quot;: {
          &quot;terser-webpack-plugin&quot;: &quot;5.3.1&quot;,
          &quot;vue&quot;: &quot;3.2.31&quot;,
          &quot;vue-loader&quot;: &quot;17.0.0&quot;,
          &quot;webpack&quot;: &quot;5.70.0&quot;,
          &quot;webpack-cli&quot;: &quot;4.9.2&quot;
      }
  }
  </code></pre>
  <p>Of course, this is the DOM element after vue.js rendered:</p>
  <pre><code>&lt;div id=&quot;app&quot; data-v-app=&quot;&quot;&gt;
    &lt;!--cumbrous comment--&gt;
    &lt;!--cumbrous comment--&gt;
    &lt;!--cumbrous comment--&gt;
    &lt;!--cumbrous comment--&gt;
    &lt;!--cumbrous comment--&gt;
    &lt;div&gt; this is app &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>