Vuejs - custom loader to manipulate SFC template block

131 views Asked by At

I'd like to manipulate Vue SFCs 'template' blocks during Webpack compilation.

The goal

Being able to (mainly) remove some parts based on env varibale, sort of a conditional compilation.
This would lead to a (slightly) longer compilation but to smaller output files, moreover I could check the condition with different env varibales in pipelines for different deploy environments.

I tought of using some html parser like node-html-parser, but I'm struggling to even pass just the template block to my custom loader.

// custom-loader.js
module.exports = function customLoader(source, map) {
    console.log(source);
    console.log('=================');

    return source;
}


// webpack
module: {
    rules: [
        {
            resourceQuery: /blockType=template/,
            loader: require.resolve('./path/to/custom-loader.js'),
        }
    ]
}

Using a <test></test> custom block inside a SFC works perfectly, the content of the block is printed to the console, but it doesn't when trying to do the same with the template block.

Why not v-if

First of all, checking something at compile time is always better.
Using v-if the template section I want to remove will still be boundled in the final output, thus leading to bigger files, adding the condition final value to the SFC props or data and a continuous check during Vue lifecycle just to avoid displaying something I already know will never be visible.

0

There are 0 answers