support webpack2 and extract-text-webpack-plugin 2 (vuejs#626)

xsbchen · yyx990803 · commit 91abd7286121 · 2017-02-06T12:05:43.000-05:00
diff --git a/lib/loader.js b/lib/loader.js
@@ -106,12 +106,25 @@ module.exports = function (content) {
     })
   }
 
+  // stringify an Array of loader objects
+  function stringifyLoaders (loaders) {
+    return loaders.map(function (obj) {
+      return obj && typeof obj === 'object' && typeof obj.loader === 'string'
+        ? obj.loader + (obj.options ? '?' + JSON.stringify(obj.options) : '')
+        : obj
+    }).join('!')
+  }
+
   function getLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
     var rewriter = getRewriter(type, scoped)
     var injectString = (type === 'script' && query.inject) ? 'inject!' : ''
     if (loader !== undefined) {
+      if (Array.isArray(loader)) {
+        loader = stringifyLoaders(loader)
+      }
+
       if (type === 'style') {
         loader = addCssModulesToLoader(loader, part, index)
       }
diff --git a/test/test.js b/test/test.js
@@ -221,6 +221,27 @@ describe('vue-loader', function () {
     })
   })
 
+  it('extract CSS by extract-text-webpack-plugin 2', function (done) {
+    webpack(Object.assign({}, globalConfig, {
+      entry: './test/fixtures/extract-css.vue',
+      vue: {
+        loaders: {
+          css: [{ loader: ExtractTextPlugin.loader({ remove: true }) }, { loader: 'css-loader' }],
+          stylus: [{ loader: ExtractTextPlugin.loader({ remove: true }) }, { loader: 'css-loader?sourceMap' }, { loader: 'stylus-loader' }]
+        }
+      },
+      plugins: [
+        new ExtractTextPlugin('test.output2.css')
+      ]
+    }), function (err, stats) {
+      expect(stats.compilation.errors).to.be.empty
+      getFile('test.output2.css', function (data) {
+        expect(data).to.contain('h1 {\n  color: #f00;\n}\n\n\n\n\n\n\nh2 {\n  color: green;\n}')
+        done()
+      })
+    })
+  })
+
   it('dependency injection', function (done) {
     test({
       entry: './test/fixtures/inject.js'
