diff --git a/.gitignore b/.gitignore
index 7749b0a6c..907ea8e9a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,8 @@
+.idea
 .DS_Store
 exploration
 node_modules
 *.log
 example/dist
 docs/.vuepress/dist
-test/.cache
\ No newline at end of file
+test/.cache
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1c0e0279..032e0e047 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+<a name="15.7.2"></a>
+## [15.7.2](https://github.com/vuejs/vue-loader/compare/v15.7.1...v15.7.2) (2019-11-02)
+
+
+### Bug Fixes
+
+* add cache-loader to optional peer dependency ([e9d8b71](https://github.com/vuejs/vue-loader/commit/e9d8b71))
+* use `require.resolve` when referencing `cache-loader` ([#1585](https://github.com/vuejs/vue-loader/issues/1585)) ([d3fa467](https://github.com/vuejs/vue-loader/commit/d3fa467))
+
+
+
 <a name="15.7.1"></a>
 ## [15.7.1](https://github.com/vuejs/vue-loader/compare/v15.7.0...v15.7.1) (2019-07-18)
 
diff --git a/README.md b/README.md
index 5828ac012..a840bdf68 100644
--- a/README.md
+++ b/README.md
@@ -42,3 +42,79 @@ There are many cool features provided by `vue-loader`:
 - State-preserving hot-reloading during development.
 
 In a nutshell, the combination of webpack and `vue-loader` gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
+
+## How It Works
+
+> The following section is for maintainers and contributors who are interested in the internal implementation details of `vue-loader`, and is **not** required knowledge for end users.
+
+`vue-loader` is not a simple source transform loader. It handles each language blocks inside an SFC with its own dedicated loader chain (you can think of each block as a "virtual module"), and finally assembles the blocks together into the final module. Here's a brief overview of how the whole thing works:
+
+1. `vue-loader` parses the SFC source code into an *SFC Descriptor* using `@vue/component-compiler-utils`. It then generates an import for each language block so the actual returned module code looks like this:
+
+    ``` js
+    // code returned from the main loader for 'source.vue'
+
+    // import the <template> block
+    import render from 'source.vue?vue&type=template'
+    // import the <script> block
+    import script from 'source.vue?vue&type=script'
+    export * from 'source.vue?vue&type=script'
+    // import <style> blocks
+    import 'source.vue?vue&type=style&index=1'
+
+    script.render = render
+    export default script
+    ```
+
+    Notice how the code is importing `source.vue` itself, but with different request queries for each block.
+
+2. We want the content in `script` block to be treated like `.js` files (and if it's `<script lang="ts">`, we want to to be treated like `.ts` files). Same for other language blocks. So we want webpack to apply any configured module rules that matches `.js` also to requests that look like `source.vue?vue&type=script`. This is what `VueLoaderPlugin` (`src/plugins.ts`) does: for each module rule in the webpack config, it creates a modified clone that targets corresponding Vue language block requests.
+
+    Suppose we have configured `babel-loader` for all `*.js` files. That rule will be cloned and applied to Vue SFC `<script>` blocks as well. Internally to webpack, a request like
+
+    ``` js
+    import script from 'source.vue?vue&type=script'
+    ```
+
+    Will expand to:
+
+    ``` js
+    import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
+    ```
+
+    Notice the `vue-loader` is also matched because `vue-loader` are applied to `.vue` files.
+
+    Similarly, if you have configured `style-loader` + `css-loader` + `sass-loader` for `*.scss` files:
+
+    ``` html
+    <style scoped lang="scss">
+    ```
+
+    Will be returned by `vue-loader` as:
+
+    ``` js
+    import 'source.vue?vue&type=style&index=1&scoped&lang=scss'
+    ```
+
+    And webpack will expand it to:
+
+    ``` js
+    import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
+    ```
+
+3. When processing the expanded requests, the main `vue-loader` will get invoked again. This time though, the loader notices that the request has queries and is targeting a specific block only. So it selects (`src/select.ts`) the inner content of the target block and passes it on to the loaders matched after it.
+
+4. For the `<script>` block, this is pretty much it. For `<template>` and `<style>` blocks though, a few extra tasks need to be performed:
+
+    - We need to compile the template using the Vue template compiler;
+    - We need to post-process the CSS in `<style scoped>` blocks, **after** `css-loader` but **before** `style-loader`.
+
+    Technically, these are additional loaders (`src/templateLoader.ts` and `src/stylePostLoader.ts`) that need to be injected into the expanded loader chain. It would be very complicated if the end users have to configure this themselves, so `VueLoaderPlugin` also injects a global [Pitching Loader](https://webpack.js.org/api/loaders/#pitching-loader) (`src/pitcher.ts`) that intercepts Vue `<template>` and `<style>` requests and injects the necessary loaders. The final requests look like the following:
+
+    ``` js
+    // <template lang="pug">
+    import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'
+
+    // <style scoped lang="scss">
+    import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'
+    ```
diff --git a/docs/ru/guide/custom-blocks.md b/docs/ru/guide/custom-blocks.md
index 3c3bb5758..6ac91f677 100644
--- a/docs/ru/guide/custom-blocks.md
+++ b/docs/ru/guide/custom-blocks.md
@@ -74,7 +74,7 @@ This is the documentation for component B.
 <!-- ComponentA.vue -->
 <template>
   <div>
-    <ComponentB/>
+    <ComponentB />
     <p>{{ docs }}</p>
   </div>
 </template>
diff --git a/docs/ru/guide/pre-processors.md b/docs/ru/guide/pre-processors.md
index 44b653e77..c96da2a04 100644
--- a/docs/ru/guide/pre-processors.md
+++ b/docs/ru/guide/pre-processors.md
@@ -88,7 +88,7 @@ module.exports = {
       loader: 'sass-loader',
       options: {
         // вы можете также указать файл, например `variables.scss`
-        // use `data` here if sass-loader version < 8
+        // используйте свойство `data` здесь, если версия sass-loader < 8
         prependData: `$color: red;`
       }
     }
diff --git a/docs/zh/guide/pre-processors.md b/docs/zh/guide/pre-processors.md
index ff05552d6..efb709922 100644
--- a/docs/zh/guide/pre-processors.md
+++ b/docs/zh/guide/pre-processors.md
@@ -225,7 +225,7 @@ TypeScript 的配置可以通过 `tsconfig.json` 来完成。你也可以查阅
 
 ## Pug
 
-模板的处理会稍微有些不同，因为绝大对数 webpack 的模板类 loader，诸如 `pug-loader`，会返回一个模板函数而不是一个编译好的 HTML 字符串。所以我们需要使用一个返回原始的 HTML 字符串的 loader，例如 `pug-plain-loader`，而不是使用 `pug-loader`。
+模板的处理会稍微有些不同，因为绝大多数 webpack 的模板类 loader，诸如 `pug-loader`，会返回一个模板函数而不是一个编译好的 HTML 字符串。所以我们需要使用一个返回原始的 HTML 字符串的 loader，例如 `pug-plain-loader`，而不是使用 `pug-loader`。
 
 ``` bash
 npm install -D pug pug-plain-loader
diff --git a/lib/index.d.ts b/lib/index.d.ts
index b21db5c16..28a4e3c5f 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -1,5 +1,5 @@
 import { Plugin } from 'webpack'
-import { VueTemplateCompiler } from '@vue/component-compiler-utils/lib/types'
+import { VueTemplateCompiler } from '@vue/component-compiler-utils/dist/types'
 import { CompilerOptions } from 'vue-template-compiler'
 
 declare namespace VueLoader {
diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js
new file mode 100644
index 000000000..77fb65681
--- /dev/null
+++ b/lib/plugin-webpack4.js
@@ -0,0 +1,157 @@
+const qs = require('querystring')
+const RuleSet = require('webpack/lib/RuleSet')
+
+const id = 'vue-loader-plugin'
+const NS = 'vue-loader'
+
+class VueLoaderPlugin {
+  apply (compiler) {
+    // add NS marker so that the loader can detect and report missing plugin
+    if (compiler.hooks) {
+      // webpack 4
+      compiler.hooks.compilation.tap(id, compilation => {
+        const normalModuleLoader = compilation.hooks.normalModuleLoader
+        normalModuleLoader.tap(id, loaderContext => {
+          loaderContext[NS] = true
+        })
+      })
+    } else {
+      // webpack < 4
+      compiler.plugin('compilation', compilation => {
+        compilation.plugin('normal-module-loader', loaderContext => {
+          loaderContext[NS] = true
+        })
+      })
+    }
+
+    // use webpack's RuleSet utility to normalize user rules
+    const rawRules = compiler.options.module.rules
+    const { rules } = new RuleSet(rawRules)
+
+    // 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 vueRule = rules[vueRuleIndex]
+
+    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.`
+      )
+    }
+
+    if (vueRule.oneOf) {
+      throw new Error(
+        `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
+      )
+    }
+
+    // get the normlized "use" for vue files
+    const vueUse = vueRule.use
+    // get vue-loader options
+    const vueLoaderUseIndex = vueUse.findIndex(u => {
+      return /^vue-loader|(\/|\\|@)vue-loader/.test(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 vue-loader options has a known ident so that we can share
+    // options by reference in the template-loader by using a ref query like
+    // template-loader??vue-loader-options
+    const vueLoaderUse = vueUse[vueLoaderUseIndex]
+    vueLoaderUse.ident = 'vue-loader-options'
+    vueLoaderUse.options = vueLoaderUse.options || {}
+
+    // for each user rule (expect 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)
+
+    // global pitcher (responsible for injecting template compiler loader & CSS
+    // post loader)
+    const pitcher = {
+      loader: require.resolve('./loaders/pitcher'),
+      resourceQuery: query => {
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null
+      },
+      options: {
+        cacheDirectory: vueLoaderUse.options.cacheDirectory,
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
+      }
+    }
+
+    // replace original rules
+    compiler.options.module.rules = [
+      pitcher,
+      ...clonedRules,
+      ...rules
+    ]
+  }
+}
+
+function createMatcher (fakeFile) {
+  return (rule, i) => {
+    // #1201 we need to skip the `include` check when locating the vue rule
+    const clone = Object.assign({}, rule)
+    delete clone.include
+    const normalized = RuleSet.normalizeRule(clone, {}, '')
+    return (
+      !rule.enforce &&
+      normalized.resource &&
+      normalized.resource(fakeFile)
+    )
+  }
+}
+
+function cloneRule (rule) {
+  const { resource, resourceQuery } = rule
+  // Assuming `test` and `resourceQuery` tests are executed in series and
+  // synchronously (which is true based on RuleSet's implementation), we can
+  // save the current resource being matched from `test` so that we can access
+  // it in `resourceQuery`. This ensures when we use the normalized rule's
+  // resource check, include/exclude are matched correctly.
+  let currentResource
+  const res = Object.assign({}, rule, {
+    resource: {
+      test: resource => {
+        currentResource = resource
+        return true
+      }
+    },
+    resourceQuery: query => {
+      const parsed = qs.parse(query.slice(1))
+      if (parsed.vue == null) {
+        return false
+      }
+      if (resource && parsed.lang == null) {
+        return false
+      }
+      const fakeResourcePath = `${currentResource}.${parsed.lang}`
+      if (resource && !resource(fakeResourcePath)) {
+        return false
+      }
+      if (resourceQuery && !resourceQuery(query)) {
+        return false
+      }
+      return true
+    }
+  })
+
+  if (rule.oneOf) {
+    res.oneOf = rule.oneOf.map(cloneRule)
+  }
+
+  return res
+}
+
+VueLoaderPlugin.NS = NS
+module.exports = VueLoaderPlugin
diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js
new file mode 100644
index 000000000..a3ec14dff
--- /dev/null
+++ b/lib/plugin-webpack5.js
@@ -0,0 +1,193 @@
+const qs = require('querystring')
+const id = 'vue-loader-plugin'
+const NS = 'vue-loader'
+const BasicEffectRulePlugin = require('webpack/lib/rules/BasicEffectRulePlugin')
+const BasicMatcherRulePlugin = require('webpack/lib/rules/BasicMatcherRulePlugin')
+const RuleSetCompiler = require('webpack/lib/rules/RuleSetCompiler')
+const UseEffectRulePlugin = require('webpack/lib/rules/UseEffectRulePlugin')
+
+const ruleSetCompiler = new RuleSetCompiler([
+  new BasicMatcherRulePlugin('test', 'resource'),
+  new BasicMatcherRulePlugin('include', 'resource'),
+  new BasicMatcherRulePlugin('exclude', 'resource', true),
+  new BasicMatcherRulePlugin('resource'),
+  new BasicMatcherRulePlugin('conditions'),
+  new BasicMatcherRulePlugin('resourceQuery'),
+  new BasicMatcherRulePlugin('realResource'),
+  new BasicMatcherRulePlugin('issuer'),
+  new BasicMatcherRulePlugin('compiler'),
+  new BasicEffectRulePlugin('type'),
+  new BasicEffectRulePlugin('sideEffects'),
+  new BasicEffectRulePlugin('parser'),
+  new BasicEffectRulePlugin('resolve'),
+  new UseEffectRulePlugin()
+])
+
+class VueLoaderPlugin {
+  apply (compiler) {
+    // add NS marker so that the loader can detect and report missing plugin
+    compiler.hooks.compilation.tap(id, compilation => {
+      const normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
+      normalModuleLoader.tap(id, loaderContext => {
+        loaderContext[NS] = true
+      })
+    })
+
+    const rules = compiler.options.module.rules
+    let rawVueRules
+    let vueRules = []
+
+    for (const rawRule of rules) {
+      // 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'
+      })
+
+      if (!vueRules.length) {
+        vueRules = ruleSet.exec({
+          resource: 'foo.vue.html'
+        })
+      }
+      if (vueRules.length > 0) {
+        if (rawRule.oneOf) {
+          throw new Error(
+            `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
+          )
+        }
+        rawVueRules = 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.`
+      )
+    }
+
+    // get the normlized "use" for vue files
+    const vueUse = vueRules.filter(rule => rule.type === 'use').map(rule => rule.value)
+
+    // get vue-loader options
+    const vueLoaderUseIndex = vueUse.findIndex(u => {
+      return /^vue-loader|(\/|\\|@)vue-loader/.test(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 vue-loader options has a known ident so that we can share
+    // options by reference in the template-loader by using a ref query like
+    // template-loader??vue-loader-options
+    const vueLoaderUse = vueUse[vueLoaderUseIndex]
+    vueLoaderUse.ident = 'vue-loader-options'
+    vueLoaderUse.options = vueLoaderUse.options || {}
+
+    // for each user rule (expect the vue rule), create a cloned rule
+    // 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))
+
+    // fix conflict with config.loader and config.options when using config.use
+    delete rawVueRules.loader
+    delete rawVueRules.options
+    rawVueRules.use = vueUse
+
+    // global pitcher (responsible for injecting template compiler loader & CSS
+    // post loader)
+    const pitcher = {
+      loader: require.resolve('./loaders/pitcher'),
+      resourceQuery: query => {
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null
+      },
+      options: {
+        cacheDirectory: vueLoaderUse.options.cacheDirectory,
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
+      }
+    }
+
+    // replace original rules
+    compiler.options.module.rules = [
+      pitcher,
+      ...clonedRules,
+      ...rules
+    ]
+  }
+}
+
+function cloneRule (rawRule, refs) {
+  const rules = ruleSetCompiler.compileRules('ruleSet', [{
+    rules: [rawRule]
+  }], refs)
+  let currentResource
+
+  const conditions = rules[0].rules
+    .map(rule => rule.conditions)
+    // shallow flat
+    .reduce((prev, next) => prev.concat(next), [])
+
+  // 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), [])
+
+    // 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, {
+    resource: resources => {
+      currentResource = resources
+      return true
+    },
+    resourceQuery: query => {
+      const parsed = qs.parse(query.slice(1))
+      if (parsed.vue == null) {
+        return false
+      }
+      if (!conditions) {
+        return false
+      }
+      const fakeResourcePath = `${currentResource}.${parsed.lang}`
+      for (const condition of conditions) {
+        // add support for resourceQuery
+        const request = condition.property === 'resourceQuery' ? query : fakeResourcePath
+        if (condition && !condition.fn(request)) {
+          return false
+        }
+      }
+      return true
+    }
+  })
+
+  delete res.test
+
+  if (rawRule.oneOf) {
+    res.oneOf = rawRule.oneOf.map(rule => cloneRule(rule, refs))
+  }
+
+  return res
+}
+
+VueLoaderPlugin.NS = NS
+module.exports = VueLoaderPlugin
diff --git a/lib/plugin.js b/lib/plugin.js
index a5d91a2f2..87848bf6b 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -1,163 +1,12 @@
-const qs = require('querystring')
-const RuleSet = require('webpack/lib/RuleSet')
-
-const id = 'vue-loader-plugin'
-const NS = 'vue-loader'
-
-class VueLoaderPlugin {
-  apply (compiler) {
-    // add NS marker so that the loader can detect and report missing plugin
-    if (compiler.hooks) {
-      // webpack 4
-      compiler.hooks.compilation.tap(id, compilation => {
-        let normalModuleLoader
-        if (Object.isFrozen(compilation.hooks)) {
-          // webpack 5
-          normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
-        } else {
-          normalModuleLoader = compilation.hooks.normalModuleLoader
-        }
-        normalModuleLoader.tap(id, loaderContext => {
-          loaderContext[NS] = true
-        })
-      })
-    } else {
-      // webpack < 4
-      compiler.plugin('compilation', compilation => {
-        compilation.plugin('normal-module-loader', loaderContext => {
-          loaderContext[NS] = true
-        })
-      })
-    }
-
-    // use webpack's RuleSet utility to normalize user rules
-    const rawRules = compiler.options.module.rules
-    const { rules } = new RuleSet(rawRules)
-
-    // 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 vueRule = rules[vueRuleIndex]
-
-    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.`
-      )
-    }
-
-    if (vueRule.oneOf) {
-      throw new Error(
-        `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
-      )
-    }
-
-    // get the normlized "use" for vue files
-    const vueUse = vueRule.use
-    // get vue-loader options
-    const vueLoaderUseIndex = vueUse.findIndex(u => {
-      return /^vue-loader|(\/|\\|@)vue-loader/.test(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 vue-loader options has a known ident so that we can share
-    // options by reference in the template-loader by using a ref query like
-    // template-loader??vue-loader-options
-    const vueLoaderUse = vueUse[vueLoaderUseIndex]
-    vueLoaderUse.ident = 'vue-loader-options'
-    vueLoaderUse.options = vueLoaderUse.options || {}
-
-    // for each user rule (expect 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)
-
-    // global pitcher (responsible for injecting template compiler loader & CSS
-    // post loader)
-    const pitcher = {
-      loader: require.resolve('./loaders/pitcher'),
-      resourceQuery: query => {
-        const parsed = qs.parse(query.slice(1))
-        return parsed.vue != null
-      },
-      options: {
-        cacheDirectory: vueLoaderUse.options.cacheDirectory,
-        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
-      }
-    }
-
-    // replace original rules
-    compiler.options.module.rules = [
-      pitcher,
-      ...clonedRules,
-      ...rules
-    ]
-  }
-}
-
-function createMatcher (fakeFile) {
-  return (rule, i) => {
-    // #1201 we need to skip the `include` check when locating the vue rule
-    const clone = Object.assign({}, rule)
-    delete clone.include
-    const normalized = RuleSet.normalizeRule(clone, {}, '')
-    return (
-      !rule.enforce &&
-      normalized.resource &&
-      normalized.resource(fakeFile)
-    )
-  }
-}
-
-function cloneRule (rule) {
-  const { resource, resourceQuery } = rule
-  // Assuming `test` and `resourceQuery` tests are executed in series and
-  // synchronously (which is true based on RuleSet's implementation), we can
-  // save the current resource being matched from `test` so that we can access
-  // it in `resourceQuery`. This ensures when we use the normalized rule's
-  // resource check, include/exclude are matched correctly.
-  let currentResource
-  const res = Object.assign({}, rule, {
-    resource: {
-      test: resource => {
-        currentResource = resource
-        return true
-      }
-    },
-    resourceQuery: query => {
-      const parsed = qs.parse(query.slice(1))
-      if (parsed.vue == null) {
-        return false
-      }
-      if (resource && parsed.lang == null) {
-        return false
-      }
-      const fakeResourcePath = `${currentResource}.${parsed.lang}`
-      if (resource && !resource(fakeResourcePath)) {
-        return false
-      }
-      if (resourceQuery && !resourceQuery(query)) {
-        return false
-      }
-      return true
-    }
-  })
-
-  if (rule.oneOf) {
-    res.oneOf = rule.oneOf.map(cloneRule)
-  }
-
-  return res
+const webpack = require('webpack')
+let VueLoaderPlugin = null
+
+if (webpack.version[0] > 4) {
+  // webpack5 and upper
+  VueLoaderPlugin = require('./plugin-webpack5')
+} else {
+  // webpack4 and lower
+  VueLoaderPlugin = require('./plugin-webpack4')
 }
 
-VueLoaderPlugin.NS = NS
 module.exports = VueLoaderPlugin
diff --git a/package.json b/package.json
index d9801e445..11f28543e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-loader",
-  "version": "15.7.2",
+  "version": "15.8.0",
   "description": "Vue single-file component loader for Webpack",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -42,7 +42,7 @@
     }
   },
   "dependencies": {
-    "@vue/component-compiler-utils": "^3.0.0",
+    "@vue/component-compiler-utils": "^3.1.0",
     "hash-sum": "^1.0.2",
     "loader-utils": "^1.1.0",
     "vue-hot-reload-api": "^2.3.0",
diff --git a/test/advanced.spec.js b/test/advanced.spec.js
index 212ef4ef2..5d57e138c 100644
--- a/test/advanced.spec.js
+++ b/test/advanced.spec.js
@@ -90,7 +90,7 @@ test('expose file basename as __file in production when exposeFilename enabled',
 test('source map', done => {
   bundle({
     entry: 'basic.vue',
-    devtool: '#source-map'
+    devtool: 'source-map'
   }, code => {
     const map = mfs.readFileSync('/test.build.js.map', 'utf-8')
     const smc = new SourceMapConsumer(JSON.parse(map))
diff --git a/test/template.spec.js b/test/template.spec.js
index 1fee594ac..b0c0c4cdb 100644
--- a/test/template.spec.js
+++ b/test/template.spec.js
@@ -49,7 +49,13 @@ test('transform relative URLs and respects resolve alias', done => {
     },
     module: {
       rules: [
-        { test: /\.png$/, loader: 'file-loader?name=[name].[hash:6].[ext]' }
+        {
+          test: /\.png$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash:6].[ext]'
+          }
+        }
       ]
     }
   }, ({ window, module }) => {
diff --git a/yarn.lock b/yarn.lock
index 033af7330..650be0a97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -851,10 +851,10 @@
     source-map "^0.5.6"
     vue-template-es2015-compiler "^1.6.0"
 
-"@vue/component-compiler-utils@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.0.0.tgz#d16fa26b836c06df5baaeb45f3d80afc47e35634"
-  integrity sha512-am+04/0UX7ektcmvhYmrf84BDVAD8afFOf4asZjN84q8xzxFclbk5x0MtxuKGfp+zjN5WWPJn3fjFAWtDdIGSw==
+"@vue/component-compiler-utils@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.0.tgz#64cd394925f5af1f9c3228c66e954536f5311857"
+  integrity sha512-OJ7swvl8LtKtX5aYP8jHhO6fQBIRIGkU6rvWzK+CGJiNOnvg16nzcBkd9qMZzW8trI2AsqAKx263nv7kb5rhZw==
   dependencies:
     consolidate "^0.15.1"
     hash-sum "^1.0.2"
@@ -862,7 +862,7 @@
     merge-source-map "^1.1.0"
     postcss "^7.0.14"
     postcss-selector-parser "^5.0.0"
-    prettier "1.16.3"
+    prettier "^1.18.2"
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
@@ -8838,10 +8838,10 @@ prettier@1.13.7:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.7.tgz#850f3b8af784a49a6ea2d2eaa7ed1428a34b7281"
   integrity sha512-KIU72UmYPGk4MujZGYMFwinB7lOf2LsDNGSOC8ufevsrPLISrZbNJlWstRi3m0AMuszbH+EFSQ/r6w56RSPK6w==
 
-prettier@1.16.3:
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
-  integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
+prettier@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"