diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f0d365af..8d9ccad2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,3 +30,15 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - run: yarn test
+
+  test-webpack5-inline-match-resource:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set node version to 16
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - run: yarn install
+      - run: yarn test:match-resource
diff --git a/README.md b/README.md
index e47688d0..dd3d33e4 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,10 @@
 
 - [Documentation](https://vue-loader.vuejs.org)
 
+## v17.3+ Only Options
+
+- `experimentalInlineMatchResource: boolean`: enable [Inline matchResource](https://webpack.js.org/api/loaders/#inline-matchresource) for rule matching for vue-loader.
+
 ## v16+ Only Options
 
 - `reactivityTransform: boolean`: enable [Vue Reactivity Transform](https://github.com/vuejs/rfcs/discussions/369) (SFCs only).
diff --git a/jest.config.js b/jest.config.js
index fc6e44be..4cc27660 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,12 @@
-console.log(`running tests with webpack ${process.env.WEBPACK4 ? '4' : '5'}...`)
+const isWebpack4 = process.env.WEBPACK4
+
+console.log(
+  `running tests with webpack ${isWebpack4 ? '4' : '5'}${
+    !isWebpack4 && process.env.INLINE_MATCH_RESOURCE
+      ? ' with inline match resource enabled'
+      : ''
+  }...`,
+)
 
 module.exports = {
   preset: 'ts-jest',
diff --git a/package.json b/package.json
index 6b2594cb..b2fb9c9b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "build": "tsc",
     "pretest": "tsc",
     "test": "jest",
+    "pretest:match-resource": "tsc",
+    "test:match-resource": "INLINE_MATCH_RESOURCE=true jest",
     "pretest:webpack4": "tsc",
     "test:webpack4": "WEBPACK4=true jest --forceExit",
     "dev-example": "node example/devServer.js --config example/webpack.config.js --inline --hot",
diff --git a/src/index.ts b/src/index.ts
index 55520bac..fb24e5f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,7 +22,12 @@ import { formatError } from './formatError'
 import VueLoaderPlugin from './plugin'
 import { canInlineTemplate } from './resolveScript'
 import { setDescriptor } from './descriptorCache'
-import { getOptions, stringifyRequest as _stringifyRequest } from './util'
+import {
+  getOptions,
+  stringifyRequest as _stringifyRequest,
+  genMatchResource,
+  testWebpack5,
+} from './util'
 
 export { VueLoaderPlugin }
 
@@ -53,6 +58,7 @@ export interface VueLoaderOptions {
   exposeFilename?: boolean
   appendExtension?: boolean
   enableTsInTemplate?: boolean
+  experimentalInlineMatchResource?: boolean
 
   isServerBuild?: boolean
 }
@@ -64,7 +70,7 @@ const exportHelperPath = require.resolve('./exportHelper')
 
 export default function loader(
   this: LoaderContext<VueLoaderOptions>,
-  source: string
+  source: string,
 ) {
   const loaderContext = this
 
@@ -77,8 +83,8 @@ export default function loader(
     loaderContext.emitError(
       new Error(
         `vue-loader was used without the corresponding plugin. ` +
-          `Make sure to include VueLoaderPlugin in your webpack config.`
-      )
+          `Make sure to include VueLoaderPlugin in your webpack config.`,
+      ),
     )
     errorEmitted = true
   }
@@ -92,18 +98,23 @@ export default function loader(
     rootContext,
     resourcePath,
     resourceQuery: _resourceQuery = '',
+    _compiler,
   } = loaderContext
 
+  const isWebpack5 = testWebpack5(_compiler)
   const rawQuery = _resourceQuery.slice(1)
   const incomingQuery = qs.parse(rawQuery)
   const resourceQuery = rawQuery ? `&${rawQuery}` : ''
   const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
+  const enableInlineMatchResource =
+    isWebpack5 && Boolean(options.experimentalInlineMatchResource)
 
   const isServer = options.isServerBuild ?? target === 'node'
   const isProduction =
     mode === 'production' || process.env.NODE_ENV === 'production'
 
   const filename = resourcePath.replace(/\?.*$/, '')
+
   const { descriptor, errors } = parse(source, {
     filename,
     sourceMap,
@@ -133,7 +144,7 @@ export default function loader(
   const id = hash(
     isProduction
       ? shortFilePath + '\n' + source.replace(/\r\n/g, '\n')
-      : shortFilePath
+      : shortFilePath,
   )
 
   // if the query has a type field, this is a language block request
@@ -146,7 +157,7 @@ export default function loader(
       options,
       loaderContext,
       incomingQuery,
-      !!options.appendExtension
+      !!options.appendExtension,
     )
   }
 
@@ -169,10 +180,23 @@ export default function loader(
   if (script || scriptSetup) {
     const lang = script?.lang || scriptSetup?.lang
     isTS = !!(lang && /tsx?/.test(lang))
+    const externalQuery = Boolean(script && !scriptSetup && script.src)
+      ? `&external`
+      : ``
     const src = (script && !scriptSetup && script.src) || resourcePath
     const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
-    const query = `?vue&type=script${attrsQuery}${resourceQuery}`
-    const scriptRequest = stringifyRequest(src + query)
+    const query = `?vue&type=script${attrsQuery}${resourceQuery}${externalQuery}`
+
+    let scriptRequest: string
+
+    if (enableInlineMatchResource) {
+      scriptRequest = stringifyRequest(
+        genMatchResource(this, src, query, lang || 'js'),
+      )
+    } else {
+      scriptRequest = stringifyRequest(src + query)
+    }
+
     scriptImport =
       `import script from ${scriptRequest}\n` +
       // support named exports
@@ -186,13 +210,27 @@ export default function loader(
   const useInlineTemplate = canInlineTemplate(descriptor, isProduction)
   if (descriptor.template && !useInlineTemplate) {
     const src = descriptor.template.src || resourcePath
+    const externalQuery = Boolean(descriptor.template.src) ? `&external` : ``
     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}${tsQuery}${attrsQuery}${resourceQuery}`
-    templateRequest = stringifyRequest(src + query)
+    const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}${externalQuery}`
+
+    if (enableInlineMatchResource) {
+      templateRequest = stringifyRequest(
+        genMatchResource(
+          this,
+          src,
+          query,
+          options.enableTsInTemplate !== false && isTS ? 'ts' : 'js',
+        ),
+      )
+    } else {
+      templateRequest = stringifyRequest(src + query)
+    }
+
     templateImport = `import { ${renderFnName} } from ${templateRequest}`
     propsToAttach.push([renderFnName, renderFnName])
   }
@@ -209,19 +247,29 @@ export default function loader(
       .forEach((style, i) => {
         const src = style.src || resourcePath
         const attrsQuery = attrsToQuery(style.attrs, 'css')
+        const lang = String(style.attrs.lang || 'css')
         // make sure to only pass id when necessary so that we don't inject
         // duplicate tags when multiple components import the same css file
         const idQuery = !style.src || style.scoped ? `&id=${id}` : ``
         const inlineQuery = asCustomElement ? `&inline` : ``
-        const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}`
-        const styleRequest = stringifyRequest(src + query)
+        const externalQuery = Boolean(style.src) ? `&external` : ``
+        const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}${externalQuery}`
+
+        let styleRequest
+        if (enableInlineMatchResource) {
+          styleRequest = stringifyRequest(
+            genMatchResource(this, src, query, lang),
+          )
+        } else {
+          styleRequest = stringifyRequest(src + query)
+        }
 
         if (style.module) {
           if (asCustomElement) {
             loaderContext.emitError(
               new Error(
-                `<style module> is not supported in custom element mode.`
-              )
+                `<style module> is not supported in custom element mode.`,
+              ),
             )
           }
           if (!hasCSSModules) {
@@ -234,7 +282,7 @@ export default function loader(
             i,
             styleRequest,
             style.module,
-            needsHotReload
+            needsHotReload,
           )
         } else {
           if (!isServer) {
@@ -300,9 +348,27 @@ export default function loader(
           const issuerQuery = block.attrs.src
             ? `&issuerPath=${qs.escape(resourcePath)}`
             : ''
-          const query = `?vue&type=custom&index=${i}${blockTypeQuery}${issuerQuery}${attrsQuery}${resourceQuery}`
+
+          const externalQuery = Boolean(block.attrs.src) ? `&external` : ``
+          const query = `?vue&type=custom&index=${i}${blockTypeQuery}${issuerQuery}${attrsQuery}${resourceQuery}${externalQuery}`
+
+          let customRequest
+
+          if (enableInlineMatchResource) {
+            customRequest = stringifyRequest(
+              genMatchResource(
+                this,
+                src as string,
+                query,
+                block.attrs.lang as string,
+              ),
+            )
+          } else {
+            customRequest = stringifyRequest(src + query)
+          }
+
           return (
-            `import block${i} from ${stringifyRequest(src + query)}\n` +
+            `import block${i} from ${customRequest}\n` +
             `if (typeof block${i} === 'function') block${i}(script)`
           )
         })
@@ -332,7 +398,9 @@ export default function loader(
   if (!propsToAttach.length) {
     code += `\n\nconst __exports__ = script;`
   } else {
-    code += `\n\nimport exportComponent from ${stringifyRequest(exportHelperPath)}`
+    code += `\n\nimport exportComponent from ${stringifyRequest(
+      exportHelperPath,
+    )}`
     code += `\nconst __exports__ = /*#__PURE__*/exportComponent(script, [${propsToAttach
       .map(([key, val]) => `['${key}',${val}]`)
       .join(',')}])`
diff --git a/src/pitcher.ts b/src/pitcher.ts
index e90acc9a..d3284e16 100644
--- a/src/pitcher.ts
+++ b/src/pitcher.ts
@@ -1,6 +1,6 @@
 import type { LoaderDefinitionFunction, LoaderContext } from 'webpack'
 import * as qs from 'querystring'
-import { stringifyRequest } from './util'
+import { getOptions, stringifyRequest, testWebpack5 } from './util'
 import { VueLoaderOptions } from '.'
 
 const selfPath = require.resolve('./index')
@@ -58,7 +58,40 @@ export const pitch = function () {
   })
 
   // Inject style-post-loader before css-loader for scoped CSS and trimming
+  const isWebpack5 = testWebpack5(context._compiler)
+  const options = (getOptions(context) || {}) as VueLoaderOptions
   if (query.type === `style`) {
+    if (isWebpack5 && context._compiler?.options.experiments.css) {
+      // If user enables `experiments.css`, then we are trying to emit css code directly.
+      // Although we can target requests like `xxx.vue?type=style` to match `type: "css"`,
+      // it will make the plugin a mess.
+      if (!options.experimentalInlineMatchResource) {
+        context.emitError(
+          new Error(
+            '`experimentalInlineMatchResource` should be enabled if `experiments.css` enabled currently',
+          ),
+        )
+        return ''
+      }
+
+      if (query.inline || query.module) {
+        context.emitError(
+          new Error(
+            '`inline` or `module` is currently not supported with `experiments.css` enabled',
+          ),
+        )
+        return ''
+      }
+
+      const loaderString = [stylePostLoaderPath, ...loaders]
+        .map((loader) => {
+          return typeof loader === 'string' ? loader : loader.request
+        })
+        .join('!')
+      return `@import "${context.resourcePath}${
+        query.lang ? `.${query.lang}` : ''
+      }${context.resourceQuery}!=!-!${loaderString}!${context.resource}";`
+    }
     const cssLoaderIndex = loaders.findIndex(isCSSLoader)
     if (cssLoaderIndex > -1) {
       // if inlined, ignore any loaders after css-loader and replace w/ inline
@@ -71,7 +104,8 @@ export const pitch = function () {
       return genProxyModule(
         [...afterLoaders, stylePostLoaderPath, ...beforeLoaders],
         context,
-        !!query.module || query.inline != null
+        !!query.module || query.inline != null,
+        (query.lang as string) || 'css',
       )
     }
   }
@@ -84,15 +118,21 @@ export const pitch = function () {
 
   // Rewrite request. Technically this should only be done when we have deduped
   // loaders. But somehow this is required for block source maps to work.
-  return genProxyModule(loaders, context, query.type !== 'template')
+  return genProxyModule(
+    loaders,
+    context,
+    query.type !== 'template',
+    query.ts ? 'ts' : (query.lang as string),
+  )
 }
 
 function genProxyModule(
   loaders: (Loader | string)[],
   context: LoaderContext<VueLoaderOptions>,
-  exportDefault = true
+  exportDefault = true,
+  lang = 'js',
 ) {
-  const request = genRequest(loaders, context)
+  const request = genRequest(loaders, lang, context)
   // return a proxy module which simply re-exports everything from the
   // actual request. Note for template blocks the compiled module has no
   // default export.
@@ -104,15 +144,31 @@ function genProxyModule(
 
 function genRequest(
   loaders: (Loader | string)[],
-  context: LoaderContext<VueLoaderOptions>
+  lang: string,
+  context: LoaderContext<VueLoaderOptions>,
 ) {
+  const isWebpack5 = testWebpack5(context._compiler)
+  const options = (getOptions(context) || {}) as VueLoaderOptions
+  const enableInlineMatchResource =
+    isWebpack5 && options.experimentalInlineMatchResource
+
   const loaderStrings = loaders.map((loader) => {
     return typeof loader === 'string' ? loader : loader.request
   })
   const resource = context.resourcePath + context.resourceQuery
+
+  if (enableInlineMatchResource) {
+    return stringifyRequest(
+      context,
+      `${context.resourcePath}${lang ? `.${lang}` : ''}${
+        context.resourceQuery
+      }!=!-!${[...loaderStrings, resource].join('!')}`,
+    )
+  }
+
   return stringifyRequest(
     context,
-    '-!' + [...loaderStrings, resource].join('!')
+    '-!' + [...loaderStrings, resource].join('!'),
   )
 }
 
diff --git a/src/plugin.ts b/src/plugin.ts
index a7b4a42d..f4c9e34e 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -1,19 +1,26 @@
-import webpack from 'webpack'
 import type { Compiler } from 'webpack'
+import { testWebpack5 } from './util'
 
 declare class VueLoaderPlugin {
   static NS: string
   apply(compiler: Compiler): void
 }
 
-let Plugin: typeof VueLoaderPlugin
+const NS = '@freddy38510/vue-loader'
 
-if (webpack.version && webpack.version[0] > '4') {
-  // webpack5 and upper
-  Plugin = require('./pluginWebpack5').default
-} else {
-  // webpack4 and lower
-  Plugin = require('./pluginWebpack4').default
+class Plugin {
+  static NS = NS
+  apply(compiler: Compiler) {
+    let Ctor: typeof VueLoaderPlugin
+    if (testWebpack5(compiler)) {
+      // webpack5 and upper
+      Ctor = require('./pluginWebpack5').default
+    } else {
+      // webpack4 and lower
+      Ctor = require('./pluginWebpack4').default
+    }
+    new Ctor().apply(compiler)
+  }
 }
 
 export default Plugin
diff --git a/src/pluginWebpack5.ts b/src/pluginWebpack5.ts
index e107d2fb..8c13ebb6 100644
--- a/src/pluginWebpack5.ts
+++ b/src/pluginWebpack5.ts
@@ -1,6 +1,6 @@
 import * as qs from 'querystring'
 import type { VueLoaderOptions } from './'
-import type { RuleSetRule, Compiler } from 'webpack'
+import type { RuleSetRule, Compiler, RuleSetUse } from 'webpack'
 import { needHMR } from './util'
 import { clientCache, typeDepToSFCMap } from './resolveScript'
 import { compiler as vueCompiler } from './compiler'
@@ -21,7 +21,7 @@ try {
   const ObjectMatcherRulePlugin = require('webpack/lib/rules/ObjectMatcherRulePlugin')
   objectMatcherRulePlugins.push(
     new ObjectMatcherRulePlugin('assert', 'assertions'),
-    new ObjectMatcherRulePlugin('descriptionData')
+    new ObjectMatcherRulePlugin('descriptionData'),
   )
 } catch (e) {
   const DescriptionDataMatcherRulePlugin = require('webpack/lib/rules/DescriptionDataMatcherRulePlugin')
@@ -38,7 +38,7 @@ type RuleSetCompiler = {
     compileRule(
       path: string,
       rawRule: RawRule,
-      refs: Map<string, any>
+      refs: Map<string, any>,
     ): CompiledRule
   }
 }
@@ -133,7 +133,7 @@ class VueLoaderPlugin {
       if (vueRules.length > 0) {
         if (rawRule.oneOf) {
           throw new Error(
-            `[VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.`
+            `[VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.`,
           )
         }
         rawVueRule = rawRule
@@ -143,11 +143,11 @@ class VueLoaderPlugin {
     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 normlized "use" for vue files
+    // get the normalized "use" for vue files
     const vueUse = vueRules
       .filter((rule) => rule.type === 'use')
       .map((rule) => rule.value)
@@ -156,14 +156,14 @@ class VueLoaderPlugin {
     const vueLoaderUseIndex = vueUse.findIndex((u) => {
       // FIXME: this code logic is incorrect when project paths starts with `vue-loader-something`
       return /^@freddy38510(\/|\\)vue-loader|(\/|\\|@)@freddy38510(\/|\\)vue-loader/.test(
-        u.loader
+        u.loader,
       )
     })
 
     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.`,
       )
     }
 
@@ -173,6 +173,8 @@ class VueLoaderPlugin {
     const vueLoaderUse = vueUse[vueLoaderUseIndex]
     const vueLoaderOptions = (vueLoaderUse.options =
       vueLoaderUse.options || {}) as VueLoaderOptions
+    const enableInlineMatchResource =
+      vueLoaderOptions.experimentalInlineMatchResource
 
     // for each user rule (except the vue rule), create a cloned rule
     // that targets the corresponding language blocks in *.vue files.
@@ -180,7 +182,7 @@ class VueLoaderPlugin {
     const clonedRules = rules
       .filter((r) => r !== rawVueRule)
       .map((rawRule) =>
-        cloneRule(rawRule, refs, langBlockRuleCheck, langBlockRuleResource)
+        cloneRule(rawRule, refs, langBlockRuleCheck, langBlockRuleResource),
       )
 
     // fix conflict with config.loader and config.options when using config.use
@@ -209,7 +211,7 @@ class VueLoaderPlugin {
       .filter(
         (r) =>
           r !== rawVueRule &&
-          (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)
+          (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0),
       )
       .map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource))
 
@@ -224,16 +226,53 @@ class VueLoaderPlugin {
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null
       },
+      options: vueLoaderOptions,
     }
 
     // replace original rules
-    compiler.options.module!.rules = [
-      pitcher,
-      ...jsRulesForRenderFn,
-      templateCompilerRule,
-      ...clonedRules,
-      ...rules,
-    ]
+    if (enableInlineMatchResource) {
+      // Match rules using `vue-loader`
+      const vueLoaderRules = rules.filter((rule) => {
+        const matchOnce = (use?: RuleSetUse) => {
+          let loaderString = ''
+
+          if (!use) {
+            return loaderString
+          }
+
+          if (typeof use === 'string') {
+            loaderString = use
+          } else if (Array.isArray(use)) {
+            loaderString = matchOnce(use[0])
+          } else if (typeof use === 'object' && use.loader) {
+            loaderString = use.loader
+          }
+          return loaderString
+        }
+
+        const loader = rule.loader || matchOnce(rule.use)
+        return (
+          loader === require('../package.json').name ||
+          loader.startsWith(require.resolve('./index'))
+        )
+      })
+
+      compiler.options.module!.rules = [
+        pitcher,
+        ...rules.filter((rule) => !vueLoaderRules.includes(rule)),
+        templateCompilerRule,
+        ...clonedRules,
+        ...vueLoaderRules,
+      ]
+    } else {
+      compiler.options.module!.rules = [
+        pitcher,
+        ...jsRulesForRenderFn,
+        templateCompilerRule,
+        ...clonedRules,
+        ...rules,
+      ]
+    }
 
     // 3.3 HMR support for imported types
     if (
@@ -294,7 +333,7 @@ function match(rule: RawRule, fakeFile: string): Effect[] {
 
 const langBlockRuleCheck = (
   query: qs.ParsedUrlQuery,
-  rule: CompiledRule
+  rule: CompiledRule,
 ): boolean => {
   return (
     query.type === 'custom' || !rule.conditions.length || query.lang != null
@@ -303,7 +342,7 @@ const langBlockRuleCheck = (
 
 const langBlockRuleResource = (
   query: qs.ParsedUrlQuery,
-  resource: string
+  resource: string,
 ): string => `${resource}.${query.lang}`
 
 const jsRuleCheck = (query: qs.ParsedUrlQuery): boolean => {
@@ -319,12 +358,12 @@ function cloneRule(
   rawRule: RawRule,
   refs: Map<string, any>,
   ruleCheck: (query: qs.ParsedUrlQuery, rule: CompiledRule) => boolean,
-  ruleResource: (query: qs.ParsedUrlQuery, resource: string) => string
+  ruleResource: (query: qs.ParsedUrlQuery, resource: string) => string,
 ): RawRule {
   const compiledRule = ruleSetCompiler.compileRule(
     `clonedRuleSet-${++uid}`,
     rawRule,
-    refs
+    refs,
   )
 
   // do not process rule with enforce
@@ -374,13 +413,13 @@ function cloneRule(
 
   if (rawRule.rules) {
     res.rules = rawRule.rules.map((rule) =>
-      cloneRule(rule, refs, ruleCheck, ruleResource)
+      cloneRule(rule, refs, ruleCheck, ruleResource),
     )
   }
 
   if (rawRule.oneOf) {
     res.oneOf = rawRule.oneOf.map((rule) =>
-      cloneRule(rule, refs, ruleCheck, ruleResource)
+      cloneRule(rule, refs, ruleCheck, ruleResource),
     )
   }
 
diff --git a/src/util.ts b/src/util.ts
index 1a2718fa..1b1a0ce7 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,11 +1,12 @@
 import type { Compiler, LoaderContext } from 'webpack'
+import qs from 'querystring'
 import type { SFCDescriptor, CompilerOptions } from 'vue/compiler-sfc'
 import type { VueLoaderOptions } from '.'
 import * as path from 'path'
 
 export function needHMR(
   vueLoaderOptions: VueLoaderOptions,
-  compilerOptions: Compiler['options']
+  compilerOptions: Compiler['options'],
 ) {
   const isServer =
     vueLoaderOptions.isServerBuild ?? compilerOptions.target === 'node'
@@ -17,7 +18,7 @@ export function needHMR(
 
 export function resolveTemplateTSOptions(
   descriptor: SFCDescriptor,
-  options: VueLoaderOptions
+  options: VueLoaderOptions,
 ): CompilerOptions | null {
   if (options.enableTsInTemplate === false) return null
 
@@ -59,7 +60,7 @@ const specialValues = {
 function parseQuery(query: string) {
   if (query.substr(0, 1) !== '?') {
     throw new Error(
-      "A valid query string passed to parseQuery should begin with '?'"
+      "A valid query string passed to parseQuery should begin with '?'",
     )
   }
 
@@ -126,7 +127,7 @@ function isRelativePath(str: string) {
 
 export function stringifyRequest(
   loaderContext: LoaderContext<VueLoaderOptions>,
-  request: string
+  request: string,
 ) {
   const splitted = request.split('!')
   const context =
@@ -160,6 +161,39 @@ export function stringifyRequest(
 
         return singlePath.replace(/\\/g, '/') + query
       })
-      .join('!')
+      .join('!'),
   )
 }
+
+export function genMatchResource(
+  context: LoaderContext<VueLoaderOptions>,
+  resourcePath: string,
+  resourceQuery?: string,
+  lang?: string,
+) {
+  resourceQuery = resourceQuery || ''
+
+  const loaders: string[] = []
+  const parsedQuery = qs.parse(resourceQuery.slice(1))
+
+  // process non-external resources
+  if ('vue' in parsedQuery && !('external' in parsedQuery)) {
+    const currentRequest = context.loaders
+      .slice(context.loaderIndex)
+      .map((obj) => obj.request)
+    loaders.push(...currentRequest)
+  }
+  const loaderString = loaders.join('!')
+
+  return `${resourcePath}${lang ? `.${lang}` : ''}${resourceQuery}!=!${
+    loaderString ? `${loaderString}!` : ''
+  }${resourcePath}${resourceQuery}`
+}
+
+export const testWebpack5 = (compiler?: Compiler) => {
+  if (!compiler) {
+    return false
+  }
+  const webpackVersion = compiler?.webpack?.version
+  return Boolean(webpackVersion && Number(webpackVersion.split('.')[0]) > 4)
+}
diff --git a/test/advanced.spec.ts b/test/advanced.spec.ts
index aaf26814..355c4809 100644
--- a/test/advanced.spec.ts
+++ b/test/advanced.spec.ts
@@ -1,6 +1,12 @@
 import { SourceMapConsumer } from 'source-map'
 import { fs as mfs } from 'memfs'
-import { bundle, mockBundleAndRun, normalizeNewline, genId } from './utils'
+import {
+  bundle,
+  mockBundleAndRun,
+  normalizeNewline,
+  genId,
+  DEFAULT_VUE_USE,
+} from './utils'
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
@@ -10,7 +16,7 @@ test('support chaining with other loaders', async () => {
     modify: (config) => {
       config.module!.rules![0] = {
         test: /\.vue$/,
-        use: ['@freddy38510/vue-loader', require.resolve('./mock-loaders/js')],
+        use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/js')],
       }
     },
   })
@@ -24,10 +30,7 @@ test.skip('inherit queries on files', async () => {
     modify: (config) => {
       config.module!.rules![0] = {
         test: /\.vue$/,
-        use: [
-          '@freddy38510/vue-loader',
-          require.resolve('./mock-loaders/query'),
-        ],
+        use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/query')],
       }
     },
   })
@@ -95,7 +98,7 @@ test('extract CSS', async () => {
       config.module.rules = [
         {
           test: /\.vue$/,
-          use: '@freddy38510/vue-loader',
+          use: [DEFAULT_VUE_USE],
         },
         {
           test: /\.css$/,
@@ -129,7 +132,7 @@ test('extract CSS with code spliting', async () => {
       config.module.rules = [
         {
           test: /\.vue$/,
-          use: '@freddy38510/vue-loader',
+          use: [DEFAULT_VUE_USE],
         },
         {
           test: /\.css$/,
@@ -156,7 +159,10 @@ test('support rules with oneOf', async () => {
       entry,
       modify: (config: any) => {
         config!.module!.rules = [
-          { test: /\.vue$/, loader: '@freddy38510/vue-loader' },
+          {
+            test: /\.vue$/,
+            use: [DEFAULT_VUE_USE],
+          },
           {
             test: /\.css$/,
             use: 'style-loader',
@@ -186,7 +192,7 @@ test('support rules with oneOf', async () => {
 
   const { window: window1 } = await run('basic.vue')
   let style = normalizeNewline(
-    window1.document.querySelector('style')!.textContent!
+    window1.document.querySelector('style')!.textContent!,
   )
   expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')
 
diff --git a/test/edgeCases.spec.ts b/test/edgeCases.spec.ts
index b5757454..389431e8 100644
--- a/test/edgeCases.spec.ts
+++ b/test/edgeCases.spec.ts
@@ -1,6 +1,12 @@
 import * as path from 'path'
 import webpack from 'webpack'
-import { mfs, bundle, mockBundleAndRun, normalizeNewline } from './utils'
+import {
+  mfs,
+  bundle,
+  mockBundleAndRun,
+  normalizeNewline,
+  DEFAULT_VUE_USE,
+} from './utils'
 
 // @ts-ignore
 function assertComponent({
@@ -21,7 +27,7 @@ function assertComponent({
   expect(componentModule.data().msg).toContain(expectedMsg)
 
   const style = normalizeNewline(
-    window.document.querySelector('style')!.textContent!
+    window.document.querySelector('style')!.textContent!,
   )
   expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')
 }
@@ -31,13 +37,13 @@ test('vue rule with include', async () => {
   const result = await mockBundleAndRun({
     entry: 'basic.vue',
     modify: (config: any) => {
-      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex((r) =>
-        r.test?.toString().includes('vue')
+      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex(
+        (r) => r.test?.toString().includes('vue'),
       )
       config.module.rules[i] = {
         test: /\.vue$/,
         include: /fixtures/,
-        loader: '@freddy38510/vue-loader',
+        use: [DEFAULT_VUE_USE],
       }
     },
   })
@@ -52,7 +58,7 @@ test('test-less oneOf rules', async () => {
       config!.module!.rules = [
         {
           test: /\.vue$/,
-          loader: '@freddy38510/vue-loader',
+          use: [DEFAULT_VUE_USE],
         },
         {
           oneOf: [
@@ -74,17 +80,12 @@ test('normalize multiple use + options', async () => {
   await bundle({
     entry: 'basic.vue',
     modify: (config: any) => {
-      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex((r) =>
-        r.test?.toString().includes('vue')
+      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex(
+        (r) => r.test?.toString().includes('vue'),
       )
       config.module.rules[i] = {
         test: /\.vue$/,
-        use: [
-          {
-            loader: '@freddy38510/vue-loader',
-            options: {},
-          },
-        ],
+        use: [DEFAULT_VUE_USE],
       }
     },
   })
@@ -94,8 +95,8 @@ test('should not duplicate css modules value imports', async () => {
   const { window, _exports } = await mockBundleAndRun({
     entry: './test/fixtures/duplicate-cssm.js',
     modify: (config: any) => {
-      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex((r) =>
-        r.test?.toString().includes('css')
+      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex(
+        (r) => r.test?.toString().includes('css'),
       )
       config.module.rules[i] = {
         test: /\.css$/,
@@ -146,8 +147,8 @@ test('usage with null-loader', async () => {
   await mockBundleAndRun({
     entry: 'basic.vue',
     modify: (config: any) => {
-      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex((r) =>
-        r.test?.toString().includes('css')
+      const i = (config.module.rules as webpack.RuleSetRule[]).findIndex(
+        (r) => r.test?.toString().includes('css'),
       )
       config.module.rules[i] = {
         test: /\.css$/,
diff --git a/test/style.spec.ts b/test/style.spec.ts
index 699957cc..dd829d42 100644
--- a/test/style.spec.ts
+++ b/test/style.spec.ts
@@ -2,6 +2,7 @@ import {
   mockBundleAndRun,
   genId,
   normalizeNewline,
+  DEFAULT_VUE_USE,
   escapeCSSClassName,
 } from './utils'
 
@@ -27,7 +28,7 @@ test('scoped style', async () => {
   expect(instance.$el.children[2].className).toBe('test')
 
   const style = normalizeNewline(
-    window.document.querySelector('style')!.textContent!
+    window.document.querySelector('style')!.textContent!,
   )
 
   expect(style).toContain(`.test[${scopeId}] {\n  color: yellow;\n}`)
@@ -37,22 +38,22 @@ test('scoped style', async () => {
   // note: vue 3 uses short ids for keyframes
   // see https://github.com/vuejs/vue-next/commit/5f271515cf17e541a2a085d23854dac7e45e074e
   expect(style).toContain(
-    `.anim[${scopeId}] {\n  animation: color-${shortId} 5s infinite, other 5s;`
+    `.anim[${scopeId}] {\n  animation: color-${shortId} 5s infinite, other 5s;`,
   )
   expect(style).toContain(
-    `.anim-2[${scopeId}] {\n  animation-name: color-${shortId}`
+    `.anim-2[${scopeId}] {\n  animation-name: color-${shortId}`,
   )
   expect(style).toContain(
-    `.anim-3[${scopeId}] {\n  animation: 5s color-${shortId} infinite, 5s other;`
+    `.anim-3[${scopeId}] {\n  animation: 5s color-${shortId} infinite, 5s other;`,
   )
   expect(style).toContain(`@keyframes color-${shortId} {`)
   expect(style).toContain(`@-webkit-keyframes color-${shortId} {`)
 
   expect(style).toContain(
-    `.anim-multiple[${scopeId}] {\n  animation: color-${shortId} 5s infinite,opacity-${shortId} 2s;`
+    `.anim-multiple[${scopeId}] {\n  animation: color-${shortId} 5s infinite,opacity-${shortId} 2s;`,
   )
   expect(style).toContain(
-    `.anim-multiple-2[${scopeId}] {\n  animation-name: color-${shortId},opacity-${shortId};`
+    `.anim-multiple-2[${scopeId}] {\n  animation-name: color-${shortId},opacity-${shortId};`,
   )
   expect(style).toContain(`@keyframes opacity-${shortId} {`)
   expect(style).toContain(`@-webkit-keyframes opacity-${shortId} {`)
@@ -86,7 +87,7 @@ test('postcss', async () => {
 
   const id = 'data-v-' + genId('postcss.vue')
   const style = normalizeNewline(
-    window.document.querySelector('style')!.textContent!
+    window.document.querySelector('style')!.textContent!,
   )
   expect(style).toContain(`h1[${id}] {\n  color: red;\n  font-size: 14px\n}`)
 })
@@ -94,7 +95,7 @@ test('postcss', async () => {
 test('CSS Modules', async () => {
   const testWithIdent = async (
     localIdentName: string | undefined,
-    regexToMatch: RegExp
+    regexToMatch: RegExp,
   ) => {
     const baseLoaders = [
       'style-loader',
@@ -114,7 +115,7 @@ test('CSS Modules', async () => {
         config!.module!.rules = [
           {
             test: /\.vue$/,
-            loader: '@freddy38510/vue-loader',
+            use: [DEFAULT_VUE_USE],
           },
           {
             test: /\.css$/,
@@ -162,7 +163,7 @@ test('CSS Modules', async () => {
   // custom ident
   await testWithIdent(
     '[path][name]---[local]---[hash:base64:5]',
-    /css-modules---red---\w{5}/
+    /css-modules---red---\w{5}/,
   )
 })
 
@@ -183,7 +184,7 @@ test('CSS Modules Extend', async () => {
       config!.module!.rules = [
         {
           test: /\.vue$/,
-          loader: '@freddy38510/vue-loader',
+          use: [DEFAULT_VUE_USE],
         },
         {
           test: /\.css$/,
@@ -196,7 +197,7 @@ test('CSS Modules Extend', async () => {
   expect(instance.$el.className).toBe(instance.$style.red)
   const style = window.document.querySelectorAll('style')![1]!.textContent!
   expect(style).toContain(
-    `.${escapeCSSClassName(instance.$style.red)} {\n  color: #FF0000;\n}`
+    `.${escapeCSSClassName(instance.$style.red)} {\n  color: #FF0000;\n}`,
   )
 })
 
diff --git a/test/template.spec.ts b/test/template.spec.ts
index 3a706e95..3284955d 100644
--- a/test/template.spec.ts
+++ b/test/template.spec.ts
@@ -1,5 +1,5 @@
 import * as path from 'path'
-import { mockBundleAndRun, normalizeNewline } from './utils'
+import { DEFAULT_VUE_USE, mockBundleAndRun, normalizeNewline } from './utils'
 
 test('apply babel transformations to expressions in template', async () => {
   const { instance } = await mockBundleAndRun({
@@ -54,7 +54,7 @@ test('transform relative URLs and respects resolve alias', async () => {
   expect(instance.$el.children[2].src).toBe('logo.cab72b.png')
 
   const style = normalizeNewline(
-    window.document.querySelector('style')!.textContent!
+    window.document.querySelector('style')!.textContent!,
   )
   expect(style).toContain('html { background-image: url(logo.cab72b.png);\n}')
   expect(style).toContain('body { background-image: url(logo.cab72b.png);\n}')
@@ -111,7 +111,7 @@ test('should allow process custom file', async () => {
       rules: [
         {
           test: /\.svg$/,
-          loader: '@freddy38510/vue-loader',
+          use: [DEFAULT_VUE_USE],
         },
       ],
     },
diff --git a/test/utils.ts b/test/utils.ts
index 05cda6a7..46d624c4 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -9,6 +9,13 @@ import { JSDOM, VirtualConsole } from 'jsdom'
 import { VueLoaderPlugin } from '..'
 import type { VueLoaderOptions } from '..'
 
+export const DEFAULT_VUE_USE = {
+  loader: '@freddy38510/vue-loader',
+  options: {
+    experimentalInlineMatchResource: Boolean(process.env.INLINE_MATCH_RESOURCE),
+  },
+}
+
 const baseConfig: webpack.Configuration = {
   mode: 'development',
   devtool: false,
@@ -29,11 +36,7 @@ const baseConfig: webpack.Configuration = {
     rules: [
       {
         test: /\.vue$/,
-        loader: '@freddy38510/vue-loader',
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [DEFAULT_VUE_USE],
       },
       {
         test: /\.ts$/,
@@ -73,16 +76,41 @@ export function bundle(
 }> {
   let config: BundleOptions = merge({}, baseConfig, options)
 
+  if (!options.experiments?.css) {
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader'],
+    })
+  }
+
   if (config.vue && config.module) {
-    const vueOptions = options.vue
+    const vueOptions = {
+      // Test experimental inline match resource by default
+      experimentalInlineMatchResource: Boolean(
+        process.env.INLINE_MATCH_RESOURCE,
+      ),
+      ...options.vue,
+    }
+
     delete config.vue
     const vueIndex = config.module.rules!.findIndex(
       (r: any) => r.test instanceof RegExp && r.test.test('.vue'),
     )
     const vueRule = config.module.rules![vueIndex]
-    config.module.rules![vueIndex] = Object.assign({}, vueRule, {
-      options: vueOptions,
-    })
+
+    // Detect `Rule.use` or `Rule.loader` and `Rule.options` combination
+    if (vueRule && typeof vueRule === 'object' && Array.isArray(vueRule.use)) {
+      // Vue usually locates at the first loader
+      if (typeof vueRule.use?.[0] === 'object') {
+        vueRule.use[0] = Object.assign({}, vueRule.use[0], {
+          options: vueOptions,
+        })
+      }
+    } else {
+      config.module.rules![vueIndex] = Object.assign({}, vueRule, {
+        options: vueOptions,
+      })
+    }
   }
 
   if (typeof config.entry === 'string' && /\.vue/.test(config.entry)) {
diff --git a/tsconfig.json b/tsconfig.json
index 15b7fee1..aead67b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,13 +14,7 @@
     "noImplicitAny": true,
     "removeComments": false,
     "skipLibCheck": true,
-    "lib": [
-      "es6",
-      "es7",
-      "DOM"
-    ]
+    "lib": ["es6", "es7", "DOM"]
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }