fix: compat with html-webpack-plugin

fix #1213
vuejs · Mar 24, 2018 · 8626739 · 8626739
1 parent 7c37a71
commit 8626739
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 12 deletions.
diff --git a/lib/loaders/pitch.js → lib/loaders/pitcher.js b/lib/loaders/pitch.js → lib/loaders/pitcher.js
@@ -10,11 +10,6 @@ module.exports = code => code
 // and transform it into appropriate requests.
 module.exports.pitch = function (remainingRequest) {
   const query = qs.parse(this.resourceQuery.slice(1))
-
-  if (query.vue == null) {
-    return
-  }
-
   const loaders = this.loaders.slice(1) // remove self
 
   // loader.request contains both the resolved loader path and its options

diff --git a/lib/plugin.js b/lib/plugin.js
@@ -89,7 +89,11 @@ module.exports = class VueLoaderPlugin {
     // inject global pitcher (responsible for injecting template compiler
     // loader & CSS post loader)
     rawRules.unshift({
-      loader: require.resolve('./loaders/pitch')
+      loader: require.resolve('./loaders/pitcher'),
+      resourceQuery: query => {
+        const parsed = qs.parse(query.slice(1))
+        return parsed.vue != null
+      }
     })
   }
 }

diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "eslint": "^4.19.0",
     "eslint-plugin-vue-libs": "^2.1.0",
     "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.1.0",
     "javascript-stringify": "^1.6.0",
     "jest": "^22.4.2",
     "jsdom": "^11.6.2",

diff --git a/test/edgeCases.spec.js b/test/edgeCases.spec.js
@@ -1,11 +1,14 @@
+const path = require('path')
+const normalizeNewline = require('normalize-newline')
+const HTMLPlugin = require('html-webpack-plugin')
+
 const {
+  mfs,
   bundle,
   mockRender,
   mockBundleAndRun
 } = require('./utils')
 
-const normalizeNewline = require('normalize-newline')
-
 const assertComponent = ({ window, module }, done) => {
   const vnode = mockRender(module, {
     msg: 'hi'
@@ -128,3 +131,20 @@ test('should not duplicate css modules value imports', done => {
     done()
   })
 })
+
+test('html-webpack-plugin', done => {
+  bundle({
+    entry: 'basic.vue',
+    plugins: [
+      new HTMLPlugin({
+        inject: true,
+        template: path.resolve(__dirname, 'fixtures/index.html'),
+        filename: 'output.html'
+      })
+    ]
+  }, () => {
+    const html = mfs.readFileSync('/output.html', 'utf-8')
+    expect(html).toMatch('test.build.js')
+    done()
+  }, true)
+})
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+  </body>
+</html>