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.