vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.98k stars 910 forks source link

comments not removed #2076

Open Coding-Kiwi opened 2 months ago

Coding-Kiwi commented 2 months ago

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:

image

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?

Coding-Kiwi commented 2 months ago

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 ...

Coding-Kiwi commented 2 months ago

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.