fix: handle multiple vue-loader rules

fixes #106

Author: KaelWD

lib/plugin.js

@@ -20,30 +20,36 @@ class VuetifyLoaderPlugin {
     // use webpack's RuleSet utility to normalize user rules
     const rawRules = compiler.options.module.rules
     const { rules } = new RuleSet(rawRules)
+    this.rules = rules
 
-    // find the rule that applies to vue files
-    const vueRuleIndex = rules.findIndex(rule => rule.use && rule.use.find(isVueLoader))
-    const vueRule = rules[vueRuleIndex]
+    // find the rules that apply to vue files
+    const vueRules = rules.filter(rule => rule.use && rule.use.find(isVueLoader))
 
-    if (!vueRule) {
+    if (!vueRules.length) {
       throw new Error(
         `[VuetifyLoaderPlugin Error] No matching rule for vue-loader found.\n` +
         `Make sure there is at least one root-level rule that uses vue-loader.`
       )
     }
 
+    vueRules.forEach(this.updateRule.bind(this))
+
+    compiler.options.module.rules = rules
+  }
+
+  updateRule (rule) {
     if (this.options.progressiveImages) {
-      const vueLoaderOptions = vueRule.use.find(isVueLoader).options
+      const vueLoaderOptions = rule.use.find(isVueLoader).options
       vueLoaderOptions.compilerOptions = vueLoaderOptions.compilerOptions || {}
       vueLoaderOptions.compilerOptions.modules = vueLoaderOptions.compilerOptions.modules || []
       vueLoaderOptions.compilerOptions.modules.push(progressiveLoaderModule)
 
-      const imageRuleIndex = rules.findIndex(rule => {
+      const imageRuleIndex = this.rules.findIndex(rule => {
         return rule.resource &&
           !rule.resourceQuery &&
           ['.png', '.jpg', '.jpeg', '.gif'].some(ext => rule.resource(ext))
       })
-      let imageRule = rules[imageRuleIndex]
+      let imageRule = this.rules[imageRuleIndex]
 
       const options = typeof this.options.progressiveImages === 'boolean'
         ? undefined
@@ -118,10 +124,10 @@ class VuetifyLoaderPlugin {
       }
     }
 
-    vueRule.oneOf = [
+    rule.oneOf = [
       {
         resourceQuery: '?',
-        use: vueRule.use
+        use: rule.use
       },
       {
         use: [
@@ -132,13 +138,11 @@ class VuetifyLoaderPlugin {
               attrsMatch: this.options.attrsMatch || []
             }
           },
-          ...vueRule.use
+          ...rule.use
         ]
       },
     ]
-    delete vueRule.use
-
-    compiler.options.module.rules = rules
+    delete rule.use
   }
 }