diff --git a/lib/compiler.js b/lib/compiler.js
index e83df169b..645c6eedf 100644
--- a/lib/compiler.js
+++ b/lib/compiler.js
@@ -2,18 +2,18 @@
 
 let cached
 
-exports.resolveCompiler = function (loaderContext) {
+exports.resolveCompiler = function (ctx, loaderContext) {
   if (cached) {
     return cached
   }
 
-  const ctx = loaderContext.rootContext
   // check 2.7
   try {
     const pkg = loadFromContext('vue/package.json', ctx)
     const [major, minor] = pkg.version.split('.')
-    if (major === '2' && minor === '7') {
+    if (major === '2' && Number(minor) >= 7) {
       return (cached = {
+        is27: true,
         compiler: loadFromContext('vue/compiler-sfc', ctx),
         templateCompiler: undefined
       })
@@ -22,7 +22,7 @@ exports.resolveCompiler = function (loaderContext) {
 
   return (cached = {
     compiler: require('@vue/component-compiler-utils'),
-    templateCompiler: loadTemplateCompiler(loaderContext)
+    templateCompiler: loadTemplateCompiler(ctx, loaderContext)
   })
 }
 
@@ -32,19 +32,23 @@ function loadFromContext (path, ctx) {
   }))
 }
 
-function loadTemplateCompiler (loaderContext) {
+function loadTemplateCompiler (ctx, loaderContext) {
   try {
-    return loadFromContext('vue-template-compiler', loaderContext.rootContext)
+    return loadFromContext('vue-template-compiler', ctx)
   } catch (e) {
-    if (/version mismatch/.test(e.toString())) {
-      loaderContext.emitError(e)
-    } else {
-      loaderContext.emitError(
-        new Error(
-          `[vue-loader] vue-template-compiler must be installed as a peer dependency, ` +
-            `or a compatible compiler implementation must be passed via options.`
+    if (loaderContext) {
+      if (/version mismatch/.test(e.toString())) {
+        loaderContext.emitError(e)
+      } else {
+        loaderContext.emitError(
+          new Error(
+            `[vue-loader] vue-template-compiler must be installed as a peer dependency, ` +
+              `or a compatible compiler implementation must be passed via options.`
+          )
         )
-      )
+      }
+    } else {
+      throw e
     }
   }
 }
diff --git a/lib/index.js b/lib/index.js
index 853d2738d..d6e96edd5 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -52,7 +52,10 @@ module.exports = function (source) {
   const context = rootContext || process.cwd()
   const sourceRoot = path.dirname(path.relative(context, resourcePath))
 
-  const { compiler, templateCompiler } = resolveCompiler(loaderContext)
+  const { compiler, templateCompiler } = resolveCompiler(
+    rootContext,
+    loaderContext
+  )
 
   const descriptor = compiler.parse({
     source,
@@ -98,6 +101,21 @@ module.exports = function (source) {
     (descriptor.script || descriptor.scriptSetup || descriptor.template) &&
     options.hotReload !== false
 
+  // script
+  let scriptImport = `var script = {}`
+  // let isTS = false
+  const { script, scriptSetup } = descriptor
+  if (script || scriptSetup) {
+    // const lang = script?.lang || scriptSetup?.lang
+    // isTS = !!(lang && /tsx?/.test(lang))
+    const src = (script && !scriptSetup && script.src) || resourcePath
+    const attrsQuery = attrsToQuery((scriptSetup || script).attrs, 'js')
+    const query = `?vue&type=script${attrsQuery}${inheritQuery}`
+    const request = stringifyRequest(src + query)
+    scriptImport =
+      `import script from ${request}\n` + `export * from ${request}` // support named exports
+  }
+
   // template
   let templateImport = `var render, staticRenderFns`
   let templateRequest
@@ -106,23 +124,13 @@ module.exports = function (source) {
     const idQuery = `&id=${id}`
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(descriptor.template.attrs)
+    // const tsQuery =
+    // options.enableTsInTemplate !== false && isTS ? `&ts=true` : ``
     const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
     const request = (templateRequest = stringifyRequest(src + query))
     templateImport = `import { render, staticRenderFns } from ${request}`
   }
 
-  // script
-  let scriptImport = `var script = {}`
-  const { script, scriptSetup } = descriptor
-  if (script || scriptSetup) {
-    const src = (script && !scriptSetup && script.src) || resourcePath
-    const attrsQuery = attrsToQuery((scriptSetup || script).attrs, 'js')
-    const query = `?vue&type=script${attrsQuery}${inheritQuery}`
-    const request = stringifyRequest(src + query)
-    scriptImport =
-      `import script from ${request}\n` + `export * from ${request}` // support named exports
-  }
-
   // styles
   let stylesCode = ``
   if (descriptor.styles.length) {
diff --git a/lib/loaders/pitcher.js b/lib/loaders/pitcher.js
index 2d7947f86..5bf28c674 100644
--- a/lib/loaders/pitcher.js
+++ b/lib/loaders/pitcher.js
@@ -4,6 +4,7 @@ const hash = require('hash-sum')
 const selfPath = require.resolve('../index')
 const templateLoaderPath = require.resolve('./templateLoader')
 const stylePostLoaderPath = require.resolve('./stylePostLoader')
+const { resolveCompiler } = require('../compiler')
 
 const isESLintLoader = l => /(\/|\\|@)eslint-loader/.test(l.path)
 const isNullLoader = l => /(\/|\\|@)null-loader/.test(l.path)
@@ -90,9 +91,8 @@ module.exports.pitch = function (remainingRequest) {
     const loaderStrings = []
 
     loaders.forEach(loader => {
-      const identifier = typeof loader === 'string'
-        ? loader
-        : (loader.path + loader.query)
+      const identifier =
+        typeof loader === 'string' ? loader : loader.path + loader.query
       const request = typeof loader === 'string' ? loader : loader.request
       if (!seen.has(identifier)) {
         seen.set(identifier, true)
@@ -102,10 +102,11 @@ module.exports.pitch = function (remainingRequest) {
       }
     })
 
-    return loaderUtils.stringifyRequest(this, '-!' + [
-      ...loaderStrings,
-      this.resourcePath + this.resourceQuery
-    ].join('!'))
+    return loaderUtils.stringifyRequest(
+      this,
+      '-!' +
+        [...loaderStrings, this.resourcePath + this.resourceQuery].join('!')
+    )
   }
 
   // Inject style-post-loader before css-loader for scoped CSS and trimming
@@ -129,25 +130,30 @@ module.exports.pitch = function (remainingRequest) {
   // for templates: inject the template compiler & optional cache
   if (query.type === `template`) {
     const path = require('path')
-    const cacheLoader = cacheDirectory && cacheIdentifier
-      ? [`${require.resolve('cache-loader')}?${JSON.stringify({
-        // For some reason, webpack fails to generate consistent hash if we
-        // use absolute paths here, even though the path is only used in a
-        // comment. For now we have to ensure cacheDirectory is a relative path.
-        cacheDirectory: (path.isAbsolute(cacheDirectory)
-          ? path.relative(process.cwd(), cacheDirectory)
-          : cacheDirectory).replace(/\\/g, '/'),
-        cacheIdentifier: hash(cacheIdentifier) + '-vue-loader-template'
-      })}`]
-      : []
+    const cacheLoader =
+      cacheDirectory && cacheIdentifier
+        ? [
+          `${require.resolve('cache-loader')}?${JSON.stringify({
+            // For some reason, webpack fails to generate consistent hash if we
+            // use absolute paths here, even though the path is only used in a
+            // comment. For now we have to ensure cacheDirectory is a relative path.
+            cacheDirectory: (path.isAbsolute(cacheDirectory)
+              ? path.relative(process.cwd(), cacheDirectory)
+              : cacheDirectory
+            ).replace(/\\/g, '/'),
+            cacheIdentifier: hash(cacheIdentifier) + '-vue-loader-template'
+          })}`
+        ]
+        : []
 
     const preLoaders = loaders.filter(isPreLoader)
     const postLoaders = loaders.filter(isPostLoader)
+    const { is27 } = resolveCompiler(this.rootContext, this)
 
     const request = genRequest([
       ...cacheLoader,
       ...postLoaders,
-      templateLoaderPath + `??vue-loader-options`,
+      ...(is27 ? [] : [templateLoaderPath + `??vue-loader-options`]),
       ...preLoaders
     ])
     // console.log(request)
diff --git a/lib/loaders/stylePostLoader.js b/lib/loaders/stylePostLoader.js
index 949fe0a5a..b6390a52c 100644
--- a/lib/loaders/stylePostLoader.js
+++ b/lib/loaders/stylePostLoader.js
@@ -6,7 +6,7 @@ const { resolveCompiler } = require('../compiler')
 // for any <style scoped> selection requests initiated from within vue files.
 module.exports = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
-  const { compiler } = resolveCompiler(this)
+  const { compiler } = resolveCompiler(this.rootContext, this)
   const { code, map, errors } = compiler.compileStyle({
     source,
     filename: this.resourcePath,
diff --git a/lib/loaders/templateLoader.js b/lib/loaders/templateLoader.js
index 4a4f49721..895d5e060 100644
--- a/lib/loaders/templateLoader.js
+++ b/lib/loaders/templateLoader.js
@@ -32,7 +32,10 @@ module.exports = function (source) {
     }
   )
 
-  const { compiler, templateCompiler } = resolveCompiler(loaderContext)
+  const { compiler, templateCompiler } = resolveCompiler(
+    loaderContext.rootContext,
+    loaderContext
+  )
 
   // for vue/compiler-sfc OR @vue/component-compiler-utils
   const finalOptions = {
diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js
index f05ec4a86..d2213ff43 100644
--- a/lib/plugin-webpack4.js
+++ b/lib/plugin-webpack4.js
@@ -1,5 +1,6 @@
 const qs = require('querystring')
 const RuleSet = require('webpack/lib/RuleSet')
+const { resolveCompiler } = require('./compiler')
 
 const id = 'vue-loader-plugin'
 const NS = 'vue-loader'
@@ -38,7 +39,7 @@ class VueLoaderPlugin {
     if (!vueRule) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
-        `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
+          `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
       )
     }
 
@@ -58,7 +59,7 @@ class VueLoaderPlugin {
     if (vueLoaderUseIndex < 0) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
-        `Make sure the rule matching .vue files include vue-loader in its use.`
+          `Make sure the rule matching .vue files include vue-loader in its use.`
       )
     }
 
@@ -71,9 +72,30 @@ class VueLoaderPlugin {
 
     // for each user rule (except the vue rule), create a cloned rule
     // that targets the corresponding language blocks in *.vue files.
-    const clonedRules = rules
-      .filter(r => r !== vueRule)
-      .map(cloneRule)
+    const clonedRules = rules.filter(r => r !== vueRule).map(cloneRule)
+
+    // rule for template compiler
+    const templateCompilerRule = {
+      loader: require.resolve('./loaders/templateLoader'),
+      resourceQuery: query => {
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null && parsed.type === 'template'
+      },
+      options: vueLoaderUse.options
+    }
+
+    // for each rule that matches plain .js/.ts files, also create a clone and
+    // match it against the compiled template code inside *.vue files, so that
+    // compiled vue render functions receive the same treatment as user code
+    // (mostly babel)
+    let jsRulesForRenderFn = []
+    if (resolveCompiler(compiler.options.context).is27) {
+      const matchesJS = createMatcher(`test.js`)
+      // const matchesTS = createMatcher(`test.ts`)
+      jsRulesForRenderFn = rules
+        .filter(r => r !== vueRule && matchesJS(r))
+        .map(cloneRuleForRenderFn)
+    }
 
     // global pitcher (responsible for injecting template compiler loader & CSS
     // post loader)
@@ -92,6 +114,8 @@ class VueLoaderPlugin {
     // replace original rules
     compiler.options.module.rules = [
       pitcher,
+      ...jsRulesForRenderFn,
+      templateCompilerRule,
       ...clonedRules,
       ...rules
     ]
@@ -104,11 +128,7 @@ function createMatcher (fakeFile) {
     const clone = Object.assign({}, rule)
     delete clone.include
     const normalized = RuleSet.normalizeRule(clone, {}, '')
-    return (
-      !rule.enforce &&
-      normalized.resource &&
-      normalized.resource(fakeFile)
-    )
+    return !rule.enforce && normalized.resource && normalized.resource(fakeFile)
   }
 }
 
@@ -157,5 +177,42 @@ function cloneRule (rule) {
   return res
 }
 
+function cloneRuleForRenderFn (rule) {
+  const resource = rule.resource
+  const resourceQuery = rule.resourceQuery
+  let currentResource
+  const res = {
+    ...rule,
+    resource: resource => {
+      currentResource = resource
+      return true
+    },
+    resourceQuery: query => {
+      const parsed = qs.parse(query.slice(1))
+      if (parsed.vue == null || parsed.type !== 'template') {
+        return false
+      }
+      const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`
+      if (resource && !resource(fakeResourcePath)) {
+        return false
+      }
+      if (resourceQuery && !resourceQuery(query)) {
+        return false
+      }
+      return true
+    }
+  }
+
+  if (rule.rules) {
+    res.rules = rule.rules.map(cloneRuleForRenderFn)
+  }
+
+  if (rule.oneOf) {
+    res.oneOf = rule.oneOf.map(cloneRuleForRenderFn)
+  }
+
+  return res
+}
+
 VueLoaderPlugin.NS = NS
 module.exports = VueLoaderPlugin
diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js
index 02d0642a2..3c0fb0c47 100644
--- a/lib/plugin-webpack5.js
+++ b/lib/plugin-webpack5.js
@@ -1,3 +1,5 @@
+const { resolveCompiler } = require('./compiler')
+
 const qs = require('querystring')
 const id = 'vue-loader-plugin'
 const NS = 'vue-loader'
@@ -47,14 +49,15 @@ class VueLoaderPlugin {
       : require('webpack/lib/NormalModule')
     // add NS marker so that the loader can detect and report missing plugin
     compiler.hooks.compilation.tap(id, compilation => {
-      const normalModuleLoader = normalModule.getCompilationHooks(compilation).loader
+      const normalModuleLoader = normalModule.getCompilationHooks(compilation)
+        .loader
       normalModuleLoader.tap(id, loaderContext => {
         loaderContext[NS] = true
       })
     })
 
     const rules = compiler.options.module.rules
-    let rawVueRules
+    let rawVueRule
     let vueRules = []
 
     for (const rawRule of rules) {
@@ -62,21 +65,9 @@ class VueLoaderPlugin {
       if (rawRule.enforce) {
         continue
       }
-      // skip the `include` check when locating the vue rule
-      const clonedRawRule = Object.assign({}, rawRule)
-      delete clonedRawRule.include
-
-      const ruleSet = ruleSetCompiler.compile([{
-        rules: [clonedRawRule]
-      }])
-      vueRules = ruleSet.exec({
-        resource: 'foo.vue'
-      })
-
+      vueRules = match(rawRule, 'foo.vue')
       if (!vueRules.length) {
-        vueRules = ruleSet.exec({
-          resource: 'foo.vue.html'
-        })
+        vueRules = match(rawRule, 'foo.vue.html')
       }
       if (vueRules.length > 0) {
         if (rawRule.oneOf) {
@@ -84,19 +75,21 @@ class VueLoaderPlugin {
             `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
           )
         }
-        rawVueRules = rawRule
+        rawVueRule = rawRule
         break
       }
     }
     if (!vueRules.length) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
-        `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
+          `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
       )
     }
 
     // get the normalized "use" for vue files
-    const vueUse = vueRules.filter(rule => rule.type === 'use').map(rule => rule.value)
+    const vueUse = vueRules
+      .filter(rule => rule.type === 'use')
+      .map(rule => rule.value)
 
     // get vue-loader options
     const vueLoaderUseIndex = vueUse.findIndex(u => {
@@ -106,7 +99,7 @@ class VueLoaderPlugin {
     if (vueLoaderUseIndex < 0) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
-        `Make sure the rule matching .vue files include vue-loader in its use.`
+          `Make sure the rule matching .vue files include vue-loader in its use.`
       )
     }
 
@@ -121,20 +114,52 @@ class VueLoaderPlugin {
     // that targets the corresponding language blocks in *.vue files.
     const refs = new Map()
     const clonedRules = rules
-      .filter(r => r !== rawVueRules)
-      .map((rawRule) => cloneRule(rawRule, refs))
+      .filter(r => r !== rawVueRule)
+      .map(rawRule =>
+        cloneRule(rawRule, refs, langBlockRuleCheck, langBlockRuleResource)
+      )
 
     // fix conflict with config.loader and config.options when using config.use
-    delete rawVueRules.loader
-    delete rawVueRules.options
-    rawVueRules.use = vueUse
+    delete rawVueRule.loader
+    delete rawVueRule.options
+    rawVueRule.use = vueUse
+
+    // rule for template compiler
+    const templateCompilerRule = {
+      loader: require.resolve('./loaders/templateLoader'),
+      resourceQuery: query => {
+        if (!query) {
+          return false
+        }
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null && parsed.type === 'template'
+      },
+      options: vueLoaderUse.options
+    }
+
+    // for each rule that matches plain .js files, also create a clone and
+    // match it against the compiled template code inside *.vue files, so that
+    // compiled vue render functions receive the same treatment as user code
+    // (mostly babel)
+    let jsRulesForRenderFn = []
+    if (resolveCompiler(compiler.options.context).is27) {
+      jsRulesForRenderFn = rules
+        .filter(
+          r =>
+            r !== rawVueRule &&
+            (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)
+        )
+        .map(rawRule => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource))
+    }
 
     // global pitcher (responsible for injecting template compiler loader & CSS
     // post loader)
     const pitcher = {
       loader: require.resolve('./loaders/pitcher'),
       resourceQuery: query => {
-        if (!query) { return false }
+        if (!query) {
+          return false
+        }
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null
       },
@@ -147,74 +172,111 @@ class VueLoaderPlugin {
     // replace original rules
     compiler.options.module.rules = [
       pitcher,
+      ...jsRulesForRenderFn,
+      templateCompilerRule,
       ...clonedRules,
       ...rules
     ]
   }
 }
 
+const matcherCache = new WeakMap()
+
+function match (rule, fakeFile) {
+  let ruleSet = matcherCache.get(rule)
+  if (!ruleSet) {
+    // skip the `include` check when locating the vue rule
+    const clonedRawRule = { ...rule }
+    delete clonedRawRule.include
+
+    ruleSet = ruleSetCompiler.compile([clonedRawRule])
+    matcherCache.set(rule, ruleSet)
+  }
+
+  return ruleSet.exec({
+    resource: fakeFile
+  })
+}
+
+const langBlockRuleCheck = (query, rule) => {
+  return (
+    query.type === 'custom' || !rule.conditions.length || query.lang != null
+  )
+}
+
+const langBlockRuleResource = (query, resource) => `${resource}.${query.lang}`
+
+const jsRuleCheck = query => {
+  return query.type === 'template'
+}
+
+const jsRuleResource = (query, resource) =>
+  `${resource}.${query.ts ? `ts` : `js`}`
+
 let uid = 0
-function cloneRule (rawRule, refs) {
-  const rules = ruleSetCompiler.compileRules(`clonedRuleSet-${++uid}`, [{
-    rules: [rawRule]
-  }], refs)
-  let currentResource
 
-  const conditions = rules[0].rules
-    .map(rule => rule.conditions)
-    // shallow flat
-    .reduce((prev, next) => prev.concat(next), [])
+function cloneRule (rawRule, refs, ruleCheck, ruleResource) {
+  const compiledRule = ruleSetCompiler.compileRule(
+    `clonedRuleSet-${++uid}`,
+    rawRule,
+    refs
+  )
 
   // do not process rule with enforce
   if (!rawRule.enforce) {
-    const ruleUse = rules[0].rules
-      .map(rule => rule.effects
-        .filter(effect => effect.type === 'use')
-        .map(effect => effect.value)
-      )
-      // shallow flat
-      .reduce((prev, next) => prev.concat(next), [])
-
+    const ruleUse = compiledRule.effects
+      .filter(effect => effect.type === 'use')
+      .map(effect => effect.value)
     // fix conflict with config.loader and config.options when using config.use
     delete rawRule.loader
     delete rawRule.options
     rawRule.use = ruleUse
   }
 
-  const res = Object.assign({}, rawRule, {
+  let currentResource
+  const res = {
+    ...rawRule,
     resource: resources => {
       currentResource = resources
       return true
     },
     resourceQuery: query => {
-      if (!query) { return false }
+      if (!query) {
+        return false
+      }
+
       const parsed = qs.parse(query.slice(1))
       if (parsed.vue == null) {
         return false
       }
-      if (!conditions) {
+      if (!ruleCheck(parsed, compiledRule)) {
         return false
       }
-      const fakeResourcePath = `${currentResource}.${parsed.lang}`
-      for (const condition of conditions) {
+      const fakeResourcePath = ruleResource(parsed, currentResource)
+      for (const condition of compiledRule.conditions) {
         // add support for resourceQuery
-        const request = condition.property === 'resourceQuery' ? query : fakeResourcePath
+        const request =
+          condition.property === 'resourceQuery' ? query : fakeResourcePath
         if (condition && !condition.fn(request)) {
           return false
         }
       }
       return true
     }
-  })
+  }
 
   delete res.test
 
   if (rawRule.rules) {
-    res.rules = rawRule.rules.map(rule => cloneRule(rule, refs))
+    res.rules = rawRule.rules.map(rule =>
+      cloneRule(rule, refs, ruleCheck, ruleResource)
+    )
   }
 
   if (rawRule.oneOf) {
-    res.oneOf = rawRule.oneOf.map(rule => cloneRule(rule, refs))
+    res.oneOf = rawRule.oneOf.map(rule =>
+      cloneRule(rule, refs, ruleCheck, ruleResource)
+    )
   }
 
   return res
diff --git a/lib/resolveScript.js b/lib/resolveScript.js
index a05deb767..954f8e50a 100644
--- a/lib/resolveScript.js
+++ b/lib/resolveScript.js
@@ -12,7 +12,7 @@ exports.resolveScript = function resolveScript (
     return null
   }
 
-  const { compiler } = resolveCompiler(loaderContext)
+  const { compiler } = resolveCompiler(loaderContext.rootContext, loaderContext)
   if (!compiler.compileScript) {
     if (descriptor.scriptSetup) {
       loaderContext.emitError(
diff --git a/package.json b/package.json
index 19fcba6b7..6af538557 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "vue-template-compiler": "^2.5.16",
     "vuepress": "^0.14.2",
     "vuepress-theme-vue": "^1.1.0",
-    "webpack": "^4.1.0",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.2.0",
     "webpack-dev-server": "^3.1.1",
     "webpack-merge": "^4.1.2",