comments not removed
Coding-Kiwi opened this issue · 3 comments
I have a component with a comment
<template>
<div class="card">
<!-- this is a test -->
<div class="card-content">
<slot />
</div>
</div>
</template>
<script>
/**
* test 123
*/
export default {};
</script>
I use webpack to bundle my app
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { fileURLToPath } from 'url';
import { VueLoaderPlugin } from "vue-loader";
import webpack from "webpack";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const SRC_DIR = path.resolve(__dirname, 'docs');
const OUT_DIR = path.resolve(__dirname, 'docs-dist');
export default (env) => {
const mode = env.production == true ? "production" : "development";
const devtool = mode == "production" ? false : "inline-source-map";
return {
mode: mode,
entry: './docs/index.js',
target: 'web',
devtool: devtool,
output: {
filename: '[name].[contenthash].js',
path: OUT_DIR,
publicPath: '/'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
}
],
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
}),
new HtmlWebpackPlugin({
template: path.resolve(SRC_DIR, 'index.html')
}),
new VueLoaderPlugin()
],
};
};
The "test 123" gets removed but the "this is a test" in the html is not removed and becomes part of the minifed bundle. Here you can see an example:
I use vue 3.4.27 and vue-loader 17.4.2
I do not have specified app.config.compilerOptions.comments
What am I missing?
I created an example project https://github.com/Coding-Kiwi/vue-comments
This is the comment https://github.com/Coding-Kiwi/vue-comments/blob/master/App.vue#L5
And in the build at the end you can see https://github.com/Coding-Kiwi/vue-comments/blob/master/dist/main.78f2c16d3e664b627fa4.js ... ,Yn(ro("div",null,[pr,co(" This is a comment "),dr],undefined,undefined,undefined ...
Okay after adding
options: {
compilerOptions: {
comments: false
}
}
to the loader config it removes the comments..
The vue docs say the default is false, but only for the runtime-build which is not the case when using vue-loader
The vue-loader docs say the default compilerOptions is empty and to look at the vue-template-compiler docs
And there... the comments option is not even listed.