[Bug]All vue-loader rule configs adopt the first vue-loader rule options

[NE-SmallTown]

Version

15.7.2

Reproduction link

https://github.com/NE-SmallTown/vue-compiler-options-bug-repro

Steps to reproduce

Just clone the repro repo and run yarn run start.

As mentioned at this comment, when we config more than one vue-loader, the first options will be adopted by all vue-loader.

Due to the resourceQuery check, the include/exclude options of webpack rule will works, but the options will not, all the vue files will be applied with the first vue-loader options.

The key problem here is not that we use findIndex(so we will always get the first vue-loader options), but because there is no way to get the real options based on the resource, VueLoaderPlugin is a plugin, not a loader. So I guess that's why we pass a fake filename foo.vue rather than a real filename.

Since we can't get the real filename/resource in a plugin(that's how plugin works and no problem), and in a plugin there is no such hook/method like resourceQuery to choose whether or not apply the options, so I think it's hard for me to fix this bug, but maybe just because I'm not familiar with webpack.

BTW, I notice that seems we use the ident "vue-loader-options" to mark the options which would be used by a vue-loader/template-loader? But I don't figure out how to make it rely on its own options rather than the first loader options.

What is expected?

The options will be adopted based on the include/exclude option

What is actually happening?

The first options are adopted for all vue-loader Rule config

[lovetingyuan]

vue-loader现在还不支持多个rule的配置

[OrenciucEvghenii]

thank you for chinese answer in english forum, good job

[LP1994]

When you use "webpack v5.0.0", if you encounter "error error: [vueloaderplugin error] no matching use for Vue loader is found. Make sure the rule matching. Vue files include Vue loader in its", If other loaders appear before "Vue loader", for example, "HTML loader" appears before "Vue loader", then just add an "enforce" option in the rules of "HTML loader", and its value is the string "post". In this way, the original loader can be used normally without changing the order of the original loader.
The configuration example code is as follows:

module: {
rules: [

// first loader
{
test: /.(html|htm)$/i,
enforce: 'post',
use: [
{
loader: 'html-loader',
},
],
},

// other loader...

{
test: /.vue$/i,
use: [
{
loader: 'vue-loader',
},
],
},

],
}

[LP1994]

Today, while updating the configuration of webpack 5, I explored this problem and verified that this method is ok.