Chained loader called multiple times per file

[miljan-aleksic]

Version

14.1.0

Reproduction link

https://github.com/miljan-aleksic/vue-loader-chained-issue

Steps to reproduce

Hi guys, I found an issue or at the very least, some awkward behavior when chaining loaders.

I have set up a new webpack project with vue-cli 2x where I have added a custom loader that counts the number of times it has been called and returns that value as .vue valid template, as well as does log it in the terminal.

I did that to show up how the chained loader is called twice or more times depending on the returned string.

Simply clone the repo, install and run npm run dev.

Note: the custom loader is placed on the custom folder and set on the basic webpack config file.

What is expected?

I would expect the custom loader to be called only once per file and the result to be further processed by vue-loader.

What is actually happening?

The custom loader function gets called several times per file. If it returns <template></template> it gets called 2 times, if instead returns <template></template><script></script> it gets called 3 times, and 4 if adding style tags.

Basically, the chained loader is called for each tag.

---

This can lead to unexpected issues when the chained loader is preprocessing a markdown content for example. I hope we can find the reason behind and fix it.

[LinusBorg]

Links for anyone else checking this out:

The custom loader:

https://github.com/miljan-aleksic/vue-loader-chained-issue/blob/master/custom/loader.js

And how/where it's applied:

https://github.com/miljan-aleksic/vue-loader-chained-issue/blob/master/build/webpack.base.conf.js#L38

(team members are notr necessary familiar with all of our repositories, i.e. the webpack template, so a few pointers about how to navigate a reproduction are helpful)

[yyx990803]

This is somewhat expected, because vue-loader internal turns each part of the file into a separate request (pseudo code):

import 'template-compiler!selector?part=template!custom-loader!Foo.vue'
import 'style-compiler!selector?part=style!custom-loader!Foo.vue'
import 'script-compiler!selector?part=script!custom-loader!Foo.vue'

Before wepback provides a more elegant way of creating virtual dependencies, we are stuck with this implementation.

If this becomes a performance issue in your build, you probably need to implement some sort of cache in your custom loader.