fix: Don't use rules that also match ".html"

This adds a check so that rules that match foo.vue.html but *also* foo.html are ignored.

Resolves vuejs#1625

Author: ubipo

Diff for: lib/plugin-webpack4.js

@@ -31,7 +31,12 @@ class VueLoaderPlugin {
     // find the rule that applies to vue files
     let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
     if (vueRuleIndex < 0) {
-      vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const vueHtmlRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const htmlOnlyRuleIndex = rawRules.findIndex(createMatcher(`foo.html`))
+      // Only use the .vue.html rules if they don't also match normal .html files
+      if (vueHtmlRuleIndex >= 0 && htmlOnlyRuleIndex < 0) {
+        vueRuleIndex = vueHtmlRuleIndex
+      }
     }
     const vueRule = rules[vueRuleIndex]
 

Diff for: lib/plugin-webpack5.js

@@ -60,9 +60,16 @@ class VueLoaderPlugin {
       })
 
       if (!vueRules.length) {
-        vueRules = ruleSet.exec({
+        const vueHtmlRules = ruleSet.exec({
           resource: 'foo.vue.html'
         })
+        const htmlOnlyRules = ruleSet.exec({
+          resource: 'foo.html'
+        })
+        // Only use the .vue.html rules if they don't also match normal .html files
+        if (vueHtmlRules.length > htmlOnlyRules.length) {
+          vueRules = vueHtmlRules
+        }
       }
       if (vueRules.length > 0) {
         if (rawRule.oneOf) {