In the past, I was able to preprocess custom non-HTML tags in a .vue file using Webpack 3 by installing a loader via a plugin. This loader would convert the custom tags into valid HTML/JS code before the vue loader would encounter them and fail.
apply(compiler) {
compiler.plugin('normal-module-factory', normalModuleFactory => {
normalModuleFactory.plugin('after-resolve', (data, callback) => {
let filename = data.resource;
// check filename
data.loaders.push({
loader: path.resolve('./my-custom-loader')
});
}
}
}
However, with Webpack 4 and the vue-loader (v15), this approach no longer seems to work. The VueLoaderPlugin now modifies the rules using a "pitcher," which causes my custom loader to be called but the altered output (the substitution of non-HTML tags) is not passed into the vue-loader (templateLoader.js) as before.
class VueLoaderPlugin {
apply (compiler) {
...
// replace original rules
compiler.options.module.rules = [
pitcher,
...clonedRules,
...rules
]
I haven't had the opportunity to delve deeper into this issue, so any guidance or suggestions would be greatly appreciated. Essentially, I am trying to run my custom loader before the vue-loader to modify the .vue files before they are processed by the vue-loader.