feat: support pre/post loaders for language blocks

Author: yyx990803

lib/loader.js

@@ -84,6 +84,8 @@ module.exports = function (content) {
   // check if there are custom loaders specified via
   // webpack config, otherwise use defaults
   var loaders = Object.assign({}, defaultLoaders, options.loaders)
+  var preLoaders = options.preLoaders || {}
+  var postLoaders = options.postLoaders || {}
 
   function getRequire (type, part, index, scoped) {
     return 'require(' +
@@ -161,6 +163,18 @@ module.exports = function (content) {
   }
 
   function getLoaderString (type, part, index, scoped) {
+    var loader = getRawLoaderString(type, part, index, scoped)
+    var lang = part.lang || defaultLang[type]
+    if (preLoaders[lang]) {
+      loader = loader + ensureBang(preLoaders[lang])
+    }
+    if (postLoaders[lang]) {
+      loader = ensureBang(postLoaders[lang]) + loader
+    }
+    return loader
+  }
+
+  function getRawLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
     var rewriter = type === 'styles' ? styleRewriter + (scoped ? '&scoped=true!' : '!') : ''

test/mock-loaders/css.js

@@ -0,0 +1,3 @@
+module.exports = function (content) {
+  return content.replace(/#f00/, '#00f')
+}

test/mock-loaders/html.js

@@ -0,0 +1,3 @@
+module.exports = function (content) {
+  return content.replace(/red/, 'green')
+}

test/mock-loader.js renamed to test/mock-loaders/js.js

@@ -524,7 +524,7 @@ describe('vue-loader', function () {
   })
 
   it('support chaining with other loaders', done => {
-    const mockLoaderPath = require.resolve('./mock-loader')
+    const mockLoaderPath = require.resolve('./mock-loaders/js')
     test({
       entry: './test/fixtures/basic.vue',
       module: {
@@ -654,4 +654,33 @@ describe('vue-loader', function () {
       done()
     })
   })
+
+  it('pre/post loaders', done => {
+    test({
+      entry: './test/fixtures/basic.vue',
+      vue: {
+        preLoaders: {
+          js: require.resolve('./mock-loaders/js'),
+          css: require.resolve('./mock-loaders/css')
+        },
+        postLoaders: {
+          html: require.resolve('./mock-loaders/html')
+        }
+      }
+    }, (window, module) => {
+      var vnode = mockRender(module, {
+        msg: 'hi'
+      })
+      // <h2 class="green">{{msg}}</h2>
+      expect(vnode.tag).to.equal('h2')
+      expect(vnode.data.staticClass).to.equal('green')
+      expect(vnode.children[0]).to.equal('hi')
+
+      expect(module.data().msg).to.contain('Changed!')
+      var style = window.document.querySelector('style').textContent
+      style = normalizeNewline(style)
+      expect(style).to.contain('comp-a h2 {\n  color: #00f;\n}')
+      done()
+    })
+  })
 })