Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

comments not removed #2076

Open
Coding-Kiwi opened this issue May 22, 2024 · 2 comments
Open

comments not removed #2076

Coding-Kiwi opened this issue May 22, 2024 · 2 comments

Comments

@Coding-Kiwi
Copy link

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
Copy link
Author

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant