From 144cc7c13e9c273e363163fdf3d7691ff81a8701 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 24 Mar 2018 17:16:13 -0400
Subject: [PATCH 1/5] chore: changelog

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91365b361..5d5ad302b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,14 @@
+<a name="15.0.0-beta.6"></a>
+# [15.0.0-beta.6](https://github.com/vuejs/vue-loader/compare/v15.0.0-beta.5...v15.0.0-beta.6) (2018-03-24)
+
+
+### Bug Fixes
+
+* compat with html-webpack-plugin ([8626739](https://github.com/vuejs/vue-loader/commit/8626739)), closes [#1213](https://github.com/vuejs/vue-loader/issues/1213)
+* only reuse ident for whitelisted loaders ([230abd4](https://github.com/vuejs/vue-loader/commit/230abd4)), closes [#1214](https://github.com/vuejs/vue-loader/issues/1214)
+
+
+
 <a name="15.0.0-beta.5"></a>
 # [15.0.0-beta.5](https://github.com/vuejs/vue-loader/compare/v15.0.0-beta.4...v15.0.0-beta.5) (2018-03-23)
 

From c954f323a2751602559f626560d7ae0293d1b858 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 24 Mar 2018 23:41:20 -0400
Subject: [PATCH 2/5] feat: handle <template lang="xxx"> with loaders

BREAKING CHANGE: <template lang="xxx"> are now handled
with webpack loaders as well.
---
 README.md                             | 45 +++++++++++++++++++++++++++
 example/debugger.js                   |  7 +++++
 example/source.vue                    |  7 ++---
 example/test.pug                      |  2 ++
 example/webpack.config.js             | 32 ++++++++++++++-----
 lib/loaders/templateLoader.js         |  3 --
 package.json                          |  1 +
 test/core.spec.js                     | 28 +++++++++++++++--
 test/fixtures/template-import-pre.vue |  1 +
 test/fixtures/template-import.html    |  3 ++
 test/fixtures/template-import.vue     |  2 +-
 test/fixtures/template-pre.js         |  9 ++++++
 test/fixtures/template-pre.vue        |  4 +++
 test/template.spec.js                 | 40 ++++++++++++++++++++++++
 yarn.lock                             |  6 ++++
 15 files changed, 173 insertions(+), 17 deletions(-)
 create mode 100644 example/debugger.js
 create mode 100644 example/test.pug
 create mode 100644 test/fixtures/template-import-pre.vue
 create mode 100644 test/fixtures/template-import.html
 create mode 100644 test/fixtures/template-pre.js
 create mode 100644 test/fixtures/template-pre.vue

diff --git a/README.md b/README.md
index cb96fc440..93b887d37 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,50 @@ The benefit is that this same rule also applies to plain `*.less` imports from J
 
 v15 also allows using non-serializable options for loaders, which was not possible in previous versions.
 
+### Template Preprocessing
+
+v14 and below uses [consolidate](https://github.com/tj/consolidate.js/) to compile `<template lang="xxx">`. v15 now applies preprocessing for them using webpack loaders instead.
+
+Note that some template loaders such as `pug-loader` exports a compiled templating function instead of plain HTML. In order to pass the correct content to Vue's template compiler, you must use a loader that outputs plain HTML instead. For example, to support `<template lang="pug">`, you can use [pug-plain-loader](https://github.com/yyx990803/pug-plain-loader):
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        loader: 'pug-plain-loader'
+      }
+    ]
+  }
+}
+```
+
+If you also intend to use it to import .pug files as HTML strings in JavaScript, you will need to chain `raw-loader` after the preprocessing loader. Note however adding raw-loader would break the usage in Vue components, so you need to have two rules, one of them excluding Vue components:
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // this applies to <template lang="pug"> in Vue components
+          {
+            resourceQuery: /^\?vue/,
+            use: ['pug-plain-loader']
+          },
+          // this applies to pug imports inside JavaScript
+          {
+            use: ['raw-loader', 'pug-plain-loader']
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ### Style Injection
 
 Client-side style injection now injects all styles upfront to ensure consistent behavior between development and extracted mode.
@@ -200,6 +244,7 @@ The following options have been deprecated and should be configured using normal
 - `cssSourceMap`
 - `buble`
 - `extractCSS`
+- `template`
 
 The following options have been deprecated and should be configured using the new `compilerOptions` option:
 
diff --git a/example/debugger.js b/example/debugger.js
new file mode 100644
index 000000000..9c3f05c67
--- /dev/null
+++ b/example/debugger.js
@@ -0,0 +1,7 @@
+module.exports = function (...args) {
+  this.callback(null, ...args)
+}
+
+module.exports.pitch = function (request) {
+  // debug
+}
diff --git a/example/source.vue b/example/source.vue
index 9186c7924..20f70308c 100644
--- a/example/source.vue
+++ b/example/source.vue
@@ -1,7 +1,6 @@
-<template>
-  <div>
-    <h1 :class="$style.red">{{ msg }}</h1>
-  </div>
+<template lang="pug">
+div(ok)
+  h1(:class="$style.red") hello
 </template>
 
 <script>
diff --git a/example/test.pug b/example/test.pug
new file mode 100644
index 000000000..f4ed36f6c
--- /dev/null
+++ b/example/test.pug
@@ -0,0 +1,2 @@
+div(ok)
+  h1(:class="$style.red") hello
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 4793c60e9..deb7e27be 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -15,17 +15,37 @@ module.exports = {
   },
   module: {
     rules: [
+      // { loader: require.resolve('./debugger') },
       {
         test: /\.vue$/,
         loader: 'vue-loader'
       },
+      // example to apply loader to a custom block without lang="xxx"
+      // this rule applies to <foo> blocks
       {
         resourceQuery: /blockType=foo/,
         loader: 'babel-loader'
       },
+      // example configuring preprocessor for <template lang="pug">
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // this applies to <template lang="pug"> in Vue components
+          {
+            resourceQuery: /^\?vue/,
+            use: ['pug-plain-loader']
+          },
+          // this applies to pug imports inside JavaScript
+          {
+            use: ['raw-loader', 'pug-plain-loader']
+          }
+        ]
+      },
+      // example configuring CSS Modules
       {
         test: /\.css$/,
         oneOf: [
+          // this applies to <style module>
           {
             resourceQuery: /module/,
             use: [
@@ -39,6 +59,7 @@ module.exports = {
               }
             ]
           },
+          // this applies to <style> or <style scoped>
           {
             use: [
               'vue-style-loader',
@@ -47,19 +68,16 @@ module.exports = {
           }
         ]
       },
+      // exmaple configration for <style lang="scss">
       {
         test: /\.scss$/,
         use: [
           'vue-style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              localIdentName: '[local]_[hash:base64:8]'
-            }
-          },
+          'css-loader',
           {
             loader: 'sass-loader',
+            // global data for all components
+            // this can be read from a scss file
             options: {
               data: '$color: red;'
             }
diff --git a/lib/loaders/templateLoader.js b/lib/loaders/templateLoader.js
index 97dc5d4a5..1c8c51c28 100644
--- a/lib/loaders/templateLoader.js
+++ b/lib/loaders/templateLoader.js
@@ -34,9 +34,6 @@ module.exports = function (source) {
     filename: this.resourcePath,
     compiler,
     compilerOptions,
-    // handle possible lang="xxx"
-    preprocessLang: query.lang,
-    preprocessOptions: options.template,
     // allow customizing behavior of vue-template-es2015-compiler
     transpileOptions: options.transpileOptions,
     transformAssetUrls: options.transformAssetUrls || true,
diff --git a/package.json b/package.json
index 77192a776..1d3d12cb3 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "normalize-newline": "^3.0.0",
     "postcss-loader": "^2.1.2",
     "pug": "^2.0.1",
+    "pug-plain-loader": "^1.0.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.7",
     "stylus": "^0.54.5",
diff --git a/test/core.spec.js b/test/core.spec.js
index 3d2a33c38..34190a8dd 100644
--- a/test/core.spec.js
+++ b/test/core.spec.js
@@ -34,11 +34,15 @@ test('pre-processors', done => {
     module: {
       rules: [
         {
-          test: /\.js/,
+          test: /\.js$/,
           loader: 'babel-loader'
         },
         {
-          test: /\.stylus/,
+          test: /\.pug$/,
+          loader: 'pug-plain-loader'
+        },
+        {
+          test: /\.stylus$/,
           use: [
             'vue-style-loader',
             'css-loader',
@@ -112,6 +116,26 @@ test('template import', done => {
   })
 })
 
+test('template import with pre-processors', done => {
+  mockBundleAndRun({
+    entry: 'template-import-pre.vue',
+    module: {
+      rules: [
+        {
+          test: /\.pug$/,
+          loader: 'pug-plain-loader'
+        }
+      ]
+    }
+  }, ({ window, module }) => {
+    const vnode = mockRender(module)
+    // '<div><h1>hello</h1></div>'
+    expect(vnode.children[0].tag).toBe('h1')
+    expect(vnode.children[0].children[0].text).toBe('hello')
+    done()
+  })
+})
+
 test('script import', done => {
   mockBundleAndRun({
     entry: 'script-import.vue'
diff --git a/test/fixtures/template-import-pre.vue b/test/fixtures/template-import-pre.vue
new file mode 100644
index 000000000..461624104
--- /dev/null
+++ b/test/fixtures/template-import-pre.vue
@@ -0,0 +1 @@
+<template lang="pug" src="./template-import.pug"></template>
diff --git a/test/fixtures/template-import.html b/test/fixtures/template-import.html
new file mode 100644
index 000000000..c9dc2eef3
--- /dev/null
+++ b/test/fixtures/template-import.html
@@ -0,0 +1,3 @@
+<div>
+  <h1>hello</h1>
+</div>
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 461624104..00de859d2 100644
--- a/test/fixtures/template-import.vue
+++ b/test/fixtures/template-import.vue
@@ -1 +1 @@
-<template lang="pug" src="./template-import.pug"></template>
+<template src="./template-import.html"></template>
diff --git a/test/fixtures/template-pre.js b/test/fixtures/template-pre.js
new file mode 100644
index 000000000..d75dad8d2
--- /dev/null
+++ b/test/fixtures/template-pre.js
@@ -0,0 +1,9 @@
+import Comp1 from './template-pre.vue'
+import Comp2 from './template-import-pre.vue'
+import html from './template-import.pug'
+
+window.exports = {
+  Comp1,
+  Comp2,
+  html
+}
diff --git a/test/fixtures/template-pre.vue b/test/fixtures/template-pre.vue
new file mode 100644
index 000000000..caa2610f1
--- /dev/null
+++ b/test/fixtures/template-pre.vue
@@ -0,0 +1,4 @@
+<template lang="pug">
+div
+  h1 hello
+</template>
diff --git a/test/template.spec.js b/test/template.spec.js
index b47eef44c..1fdfb1a53 100644
--- a/test/template.spec.js
+++ b/test/template.spec.js
@@ -252,3 +252,43 @@ test('custom compiler directives', done => {
     done()
   })
 })
+
+test('separate loader configuration for template lang and js imports', done => {
+  mockBundleAndRun({
+    entry: './test/fixtures/template-pre.js',
+    module: {
+      rules: [
+        {
+          test: /\.pug$/,
+          oneOf: [
+            // this applies to <template lang="pug"> in Vue components
+            {
+              resourceQuery: /^\?vue/,
+              use: ['pug-plain-loader']
+            },
+            // this applies to pug imports inside JavaScript
+            {
+              use: ['raw-loader', 'pug-plain-loader']
+            }
+          ]
+        }
+      ]
+    }
+  }, ({ exports }) => {
+    function assertRender (vnode) {
+      expect(vnode.tag).toBe('div')
+      expect(vnode.children[0].tag).toBe('h1')
+      expect(vnode.children[0].children[0].text).toBe('hello')
+    }
+
+    // <template lang="pug">
+    const vnode1 = mockRender(exports.Comp1, {})
+    assertRender(vnode1)
+    // <template lang="pug" src="./foo.pug">
+    const vnode2 = mockRender(exports.Comp2, {})
+    assertRender(vnode2)
+    // import html from './foo.pug'
+    expect(exports.html).toBe('<div><h1>hello</h1></div>')
+    done()
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index e1daebb72..68dc20cee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6646,6 +6646,12 @@ pug-parser@^5.0.0:
     pug-error "^1.3.2"
     token-stream "0.0.1"
 
+pug-plain-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pug-plain-loader/-/pug-plain-loader-1.0.0.tgz#cef2a984c90251882109ec2d417a6b433aa6b42a"
+  dependencies:
+    loader-utils "^1.1.0"
+
 pug-runtime@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.4.tgz#e178e1bda68ab2e8c0acfc9bced2c54fd88ceb58"

From 6ff6784162ed82c12e79bdef2465e928f37b59cb Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 24 Mar 2018 23:42:04 -0400
Subject: [PATCH 3/5] chore: remove outdated comment

---
 lib/loaders/templateLoader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/loaders/templateLoader.js b/lib/loaders/templateLoader.js
index 1c8c51c28..6da2b867c 100644
--- a/lib/loaders/templateLoader.js
+++ b/lib/loaders/templateLoader.js
@@ -6,7 +6,6 @@ const { genTemplateHotReloadCode } = require('../codegen/hotReload')
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
 // selection requests initiated from vue files.
-// Also handles lang="xxx" pre-processing via consolidate if necessary.
 module.exports = function (source) {
   const loaderContext = this
   const query = qs.parse(this.resourceQuery.slice(1))

From f55110e22b031892377171ffdd4cd492ac7ce052 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 24 Mar 2018 23:44:40 -0400
Subject: [PATCH 4/5] chore: correct template preprocessing notes

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 93b887d37..a5ae11783 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ Note that some template loaders such as `pug-loader` exports a compiled templati
 }
 ```
 
-If you also intend to use it to import .pug files as HTML strings in JavaScript, you will need to chain `raw-loader` after the preprocessing loader. Note however adding raw-loader would break the usage in Vue components, so you need to have two rules, one of them excluding Vue components:
+If you also intend to use it to import `.pug` files as HTML strings in JavaScript, you will need to chain `raw-loader` after the preprocessing loader. Note however adding `raw-loader` would break the usage in Vue components, so you need to have two rules, one of them targeting Vue files using a `resourceQuery`, the other one (fallback) targeting JavaScript imports:
 
 ``` js
 {

From ab4067f1549a749931f472b907e0b27b334eeb5c Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 24 Mar 2018 23:45:40 -0400
Subject: [PATCH 5/5] 15.0.0-beta.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1d3d12cb3..1da9d0ab8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-loader",
-  "version": "15.0.0-beta.6",
+  "version": "15.0.0-beta.7",
   "description": "Vue single-file component loader for Webpack",
   "main": "lib/index.js",
   "scripts": {