fix: should use normalized resource for template code rule clone

Author: yyx990803

example/webpack.config.js

@@ -40,6 +40,15 @@ module.exports = {
           'css-loader'
         ]
       },
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
       // target <docs> custom blocks
       {
         resourceQuery: /blockType=docs/,
@@ -54,13 +63,16 @@ module.exports = {
     })
   ],
   devServer: {
-    stats: "minimal",
+    stats: 'minimal',
     contentBase: __dirname,
     overlay: true
   },
   resolveLoader: {
     alias: {
       'vue-loader': require.resolve('../')
     }
+  },
+  optimization: {
+    // minimize: false
   }
 }

src/pitcher.ts

@@ -26,7 +26,7 @@ module.exports = pitcher
 
 // This pitching loader is responsible for intercepting all vue block requests
 // and transform it into appropriate requests.
-pitcher.pitch = function(r) {
+pitcher.pitch = function() {
   const context = this as webpack.loader.LoaderContext
   const rawLoaders = context.loaders.filter(isNotPitcher)
   let loaders = rawLoaders

src/plugin.ts

@@ -67,7 +67,10 @@ class VueLoaderPlugin implements webpack.Plugin {
     const templateCompilerRule = {
       loader: require.resolve('./templateLoader'),
       test: /\.vue$/,
-      resourceQuery: isVueTemplateBlock,
+      resourceQuery: (query: string) => {
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null && parsed.type === 'template'
+      },
       options: vueLoaderOptions
     }
 
@@ -154,18 +157,32 @@ function cloneRule(rule: webpack.RuleSetRule) {
   return res
 }
 
-function isVueTemplateBlock(query: string) {
-  const parsed = qs.parse(query.slice(1))
-  return parsed.vue != null && parsed.type === 'template'
-}
-
 function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
+  const resource = rule.resource as Function
+  const resourceQuery = rule.resourceQuery as Function
+  let currentResource: string
   const res = {
     ...rule,
     resource: {
-      test: /\.vue$/
+      test: (resource: string) => {
+        currentResource = resource
+        return true
+      }
     },
-    resourceQuery: isVueTemplateBlock
+    resourceQuery: (query: string) => {
+      const parsed = qs.parse(query.slice(1))
+      if (parsed.vue == null || parsed.type !== 'template') {
+        return false
+      }
+      const fakeResourcePath = `${currentResource}.js`
+      if (resource && !resource(fakeResourcePath)) {
+        return false
+      }
+      if (resourceQuery && !resourceQuery(query)) {
+        return false
+      }
+      return true
+    }
   }
   if (rule.oneOf) {
     res.oneOf = rule.oneOf.map(cloneRule)