Add the vue template compiler onto any template loader specified in the vue.loaders configuration (vuejs#595)

asselin · yyx990803 · commit f1df374d5fd5 · 2017-01-31T12:56:12.000-05:00
* Tweak to add the vue template compiler onto any loader specified in the vue.loaders configuration.

This enables, for example, using a markdown loader via &lt;template lang="md"&gt; in a .vue file.  Without this tweak, the webpack config has
to specify both the loader that converts the markdown (e.g.) to HTML AND template-compiler to compile it.  That, however doesn't fully work
because the webpack config can't know the moduleId generated by lib/loader.js and pass it in via the `id` parameter, so scoped styles won't
work.

* adjustments

* add tests for custom html loader
diff --git a/lib/loader.js b/lib/loader.js
@@ -150,6 +150,10 @@ module.exports = function (content) {
       if (type === 'styles') {
         loader = addCssModulesToLoader(loader, part, index)
       }
+      // if user defines custom loaders for html, add template compiler to it
+      if (type === 'template' && loader !== defaultLoaders.html) {
+        loader = defaultLoaders.html + '!' + loader
+      }
       // inject rewriter before css/html loader for
       // extractTextPlugin use cases
       if (rewriterInjectRE.test(loader)) {
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "file-loader": "^0.10.0",
     "inject-loader": "^2.0.0",
     "jsdom": "^9.2.1",
+    "marked": "^0.3.6",
     "memory-fs": "^0.4.1",
     "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
diff --git a/test/fixtures/markdown.vue b/test/fixtures/markdown.vue
@@ -0,0 +1 @@
+<template>## {{msg}}</template>
diff --git a/test/test.js b/test/test.js
@@ -504,6 +504,26 @@ describe('vue-loader', function () {
     })
   })
 
+  it('should allow adding custom html loaders', done => {
+    test({
+      entry: './test/fixtures/markdown.vue',
+      vue: {
+        loaders: {
+          html: 'marked'
+        }
+      }
+    }, (window, module) => {
+      var vnode = mockRender(module, {
+        msg: 'hi'
+      })
+      // <h2 id="-msg-">{{msg}}</h2>
+      expect(vnode.tag).to.equal('h2')
+      expect(vnode.data.attrs.id).to.equal('-msg-')
+      expect(vnode.children[0]).to.equal('hi')
+      done()
+    })
+  })
+
   it('support chaining with other loaders', done => {
     const mockLoaderPath = require.resolve('./mock-loader')
     test({
