feat: cacheBusting opiton (close #987)

Author: yyx990803

lib/loader.js

@@ -81,6 +81,7 @@ module.exports = function (content) {
     (this._compiler && this._compiler.context) ||
     this.options.context ||
     process.cwd()
+  const sourceRoot = path.dirname(path.relative(context, filePath))
   const moduleId = 'data-v-' + genId(filePath, context, options.hashKey)
   const shortFilePath = path
     .relative(context, filePath)
@@ -98,7 +99,8 @@ module.exports = function (content) {
     hasBuble && options.buble ? '?' + JSON.stringify(options.buble) : ''
 
   let output = ''
-  const parts = parse(content, fileName, this.sourceMap)
+  const bustCache = !isProduction && options.cacheBusting !== false
+  const parts = parse(content, fileName, this.sourceMap, sourceRoot, bustCache)
   const hasScoped = parts.styles.some(({ scoped }) => scoped)
   const templateAttrs =
     parts.template && parts.template.attrs && parts.template.attrs
@@ -652,8 +654,8 @@ module.exports = function (content) {
       (type === 'script' || type === 'template' || type === 'styles'
         ? type
         : 'customBlocks') +
-      '&index=' +
-      index +
+      '&index=' + index +
+      (bustCache ? '&bustCache' : '') +
       '!'
     )
   }

lib/parser.js

@@ -6,10 +6,12 @@ const SourceMapGenerator = require('source-map').SourceMapGenerator
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 
-module.exports = (content, filename, needMap, sourceRoot) => {
+module.exports = (content, filename, needMap, sourceRoot, bustCache) => {
   const cacheKey = hash(filename + content)
   // source-map cache busting for hot-reloadded modules
-  const filenameWithHash = filename + '?' + cacheKey
+  const filenameWithHash = bustCache
+    ? filename + '?' + cacheKey
+    : filename
   let output = cache.get(cacheKey)
   if (output) return output
   output = compiler.parseComponent(content, { pad: 'line' })

lib/selector.js

@@ -13,7 +13,7 @@ module.exports = function (content) {
   let filename = path.basename(this.resourcePath)
   filename = filename.substring(0, filename.lastIndexOf(path.extname(filename))) + '.vue'
   const sourceRoot = path.dirname(path.relative(context, this.resourcePath))
-  const parts = parse(content, filename, this.sourceMap, sourceRoot)
+  const parts = parse(content, filename, this.sourceMap, sourceRoot, query.bustCache)
   let part = parts[query.type]
   if (Array.isArray(part)) {
     part = part[query.index]

test/test.js

@@ -435,14 +435,14 @@ describe('vue-loader', function () {
       expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
       var style = window.document.querySelector('style').textContent
 
-      let dataURL = vnode.children[0].data.attrs.src
+      const dataURL = vnode.children[0].data.attrs.src
 
       // image tag with srcset
-      expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL + " 2x")
+      expect(vnode.children[4].data.attrs.srcset).to.equal(dataURL + ' 2x')
       // image tag with srcset with two candidates
-      expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+      expect(vnode.children[6].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
       // image tag with multiline srcset
-      expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + " 2x, " + dataURL + " 3x")
+      expect(vnode.children[8].data.attrs.srcset).to.equal(dataURL + ' 2x, ' + dataURL + ' 3x')
 
       // style
       expect(includeDataURL(style)).to.equal(true)
@@ -960,6 +960,30 @@ describe('vue-loader', function () {
     })
   })
 
+  it('cacheBusting: false', done => {
+    test({
+      entry: './test/fixtures/basic.vue',
+      vue: {
+        cacheBusting: false
+      }
+    }, (window, module, rawModule) => {
+      var vnode = mockRender(module, {
+        msg: 'hi'
+      })
+
+      // <h2 class="red">{{msg}}</h2>
+      expect(vnode.tag).to.equal('h2')
+      expect(vnode.data.staticClass).to.equal('red')
+      expect(vnode.children[0].text).to.equal('hi')
+
+      expect(module.data().msg).to.contain('Hello from Component A!')
+      var style = window.document.querySelector('style').textContent
+      style = normalizeNewline(style)
+      expect(style).to.contain('comp-a h2 {\n  color: #f00;\n}')
+      done()
+    })
+  })
+
   // Vue required tests for more complete test cases
   // this test case requires Vue >= 2.5
   if (Number(Vue.version.split('.')[1]) >= 5) {