1

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.

fudo
  • 2,254
  • 4
  • 22
  • 44

0 Answers0