feat: handle <template lang="xxx"> with loaders

BREAKING CHANGE: <template lang="xxx"> are now handled
with webpack loaders as well.

Author: yyx990803

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:
 

example/debugger.js

@@ -0,0 +1,7 @@
+module.exports = function (...args) {
+  this.callback(null, ...args)
+}
+
+module.exports.pitch = function (request) {
+  // debug
+}

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>

example/test.pug

@@ -0,0 +1,2 @@
+div(ok)
+  h1(:class="$style.red") hello

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;'
             }

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,

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",

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'

test/fixtures/template-import-pre.vue

@@ -0,0 +1 @@
+<template lang="pug" src="./template-import.pug"></template>

test/fixtures/template-import.html

@@ -0,0 +1,3 @@
+<div>
+  <h1>hello</h1>
+</div>