support src import for templates

Author: yyx990803

lib/loader.js

@@ -59,16 +59,20 @@ module.exports = function (content) {
     )
   }
 
-  function getRequireForImport (impt) {
+  function getRequireForImport (type, impt, scoped) {
     return 'require(' +
-      loaderUtils.stringifyRequest(self,
-        '-!' +
-        getLoaderString('style', impt, impt.scoped) +
-        impt.src
-      ) +
+      getRequireForImportString(type, impt, scoped) +
     ')\n'
   }
 
+  function getRequireForImportString (type, impt, scoped) {
+    return loaderUtils.stringifyRequest(self,
+      '-!' +
+      getLoaderString(type, impt, scoped) +
+      impt.src
+    )
+  }
+
   function getLoaderString (type, part, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
@@ -135,7 +139,7 @@ module.exports = function (content) {
     // add requires for src imports
     parts.styleImports.forEach(function (impt) {
       if (impt.scoped) hasLocalStyles = true
-      output += getRequireForImport(impt)
+      output += getRequireForImport('style', impt, impt.scoped)
     })
 
     // add requires for styles
@@ -152,11 +156,16 @@ module.exports = function (content) {
     }
 
     // add require for template
+    var template
     if (parts.template.length) {
+      template = parts.template[0]
       output += ';(typeof module.exports === "function" ' +
         '? module.exports.options ' +
-        ': module.exports).template = ' +
-        getRequire('template', parts.template[0], 0, hasLocalStyles)
+        ': module.exports).template = ' + (
+          template.src
+            ? getRequireForImport('template', template, hasLocalStyles)
+            : getRequire('template', template, 0, hasLocalStyles)
+        )
     }
 
     // hot reload
@@ -165,7 +174,11 @@ module.exports = function (content) {
       (parts.script.length || parts.template.length)
     ) {
       var scriptString = parts.script.length ? getRequireString('script', parts.script[0], 0) : ''
-      var templateString = parts.template.length ? getRequireString('template', parts.template[0], 0, hasLocalStyles) : ''
+      var templateString = template
+        ? template.src
+          ? getRequireForImportString('template', template, hasLocalStyles)
+          : getRequireString('template', template, 0, hasLocalStyles)
+        : ''
       var accepted = []
       if (scriptString) {
         accepted.push(scriptString.slice(1, -1))

lib/parser.js

@@ -19,17 +19,36 @@ module.exports = function (content) {
     var src = getAttribute(node, 'src')
     var scoped = getAttribute(node, 'scoped') != null
 
+    // node count check
+    if (
+      (type === 'script' || type === 'template') &&
+      output[type].length > 0
+    ) {
+      return cb(new Error(
+        '[vue-loader] Only one <script> or <template> tag is ' +
+        'allowed inside a Vue component.'
+      ))
+    }
+
+    // handle src imports
     if (src) {
-      if (type !== 'style') {
+      if (type !== 'style' && type !== 'template') {
         return cb(new Error(
-          '[vue-loader] src import is only supported for <style> tags.'
+          '[vue-loader] src import is only supported for <template> and <style> tags.'
         ))
       }
-      output.styleImports.push({
-        src: src,
-        lang: lang,
-        scoped: scoped
-      })
+      if (type === 'style') {
+        output.styleImports.push({
+          src: src,
+          lang: lang,
+          scoped: scoped
+        })
+      } else if (type === 'template') {
+        output.template.push({
+          src: src,
+          lang: lang
+        })
+      }
       return
     }
 
@@ -41,16 +60,6 @@ module.exports = function (content) {
       return
     }
 
-    if (
-      (type === 'script' || type === 'template') &&
-      output[type].length > 0
-    ) {
-      return cb(new Error(
-        '[vue-loader] Only one <script> or <template> tag is ' +
-        'allowed inside a Vue component.'
-      ))
-    }
-
     // Work around changes in parse5 >= 1.2.0
     if (node.childNodes[0].nodeName === '#document-fragment') {
       node = node.childNodes[0]

test/fixtures/import.vue

@@ -0,0 +1,2 @@
+<style src="./style-import.css"></style>
+<style src="./style-import-scoped.css" scoped></style>

test/fixtures/import-scoped.css renamed to test/fixtures/style-import-scoped.css

@@ -0,0 +1,2 @@
+div
+  h1 hello

test/fixtures/import.css renamed to test/fixtures/style-import.css

@@ -0,0 +1 @@
+window.testModule = require('./template-import.vue')

test/fixtures/style-import.vue

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

test/fixtures/template-import.jade

@@ -110,17 +110,27 @@ describe('vue-loader', function () {
 
   it('style import', function (done) {
     test({
-      entry: './test/fixtures/import.vue'
+      entry: './test/fixtures/style-import.vue'
     }, function (window) {
       var styles = window.document.querySelectorAll('style')
       expect(styles[0].textContent).to.contain('h1 { color: red; }')
       // import with scoped
-      var id = '_v-' + hash(require.resolve('./fixtures/import.vue'))
+      var id = '_v-' + hash(require.resolve('./fixtures/style-import.vue'))
       expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green; }')
       done()
     })
   })
 
+  it('template import', function (done) {
+    test({
+      entry: './test/fixtures/template-import.js'
+    }, function (window) {
+      var module = window.testModule
+      expect(module.template).to.contain('<div><h1>hello</h1></div>')
+      done()
+    })
+  })
+
   it('source map', function (done) {
     var config = assign({}, globalConfig, {
       entry: './test/fixtures/basic.js',