摘要：今天的主線任務是，稍微了解下的這里簡單記錄下打怪經歷故事背景大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，里面有個被關閉了年的魔物，我們需要把這個魔物干掉，正好以此來測試下玩家是否具備開啟者的資格，也就是戰斗系轉職資格。

今天的主線任務是，稍微了解下vue-loader的sourcemap

這里簡單記錄下打怪經歷

大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，里面有個被關閉了300年的魔物，我們需要把這個魔物干掉，正好以此來測試下玩家是否具備"開啟者"的資格，也就是戰斗系轉職資格。

于是作為勇士的我來到了杰村，獲取鑰匙

任務之前，先說一下，有不少法蘭城的勇士，并不喜歡它，有人說它違反了webpack自定義loader的精神，不支持inlineTemplate(具體這個inlineTemplate是什么鬼?)...

引自https://webpack.github.io/doc...

do only a single task
Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.
This also means they should not convert to JavaScript if not necessary.
Example: Render HTML from a template file by applying the query parameters
I could write a loader that compiles the template from source, execute it and return  a module that exports a string containing the HTML code. This is bad.

作為萌新的我，并不知道vue-loader發生了什么了，只能說一臉蒙逼

但是我內心其實覺得vue-loader作為一個vue配套的工具，還是挺不錯的

懷揣這樣的心情，就來到了門口

怎么說呢，還是先了解下vue-loader的作用，它可以transform以vue結尾的文件，從而達到一些目的，比如單文件component, hot reload, scope css...

這里要了解的sourcemap，都在parser.js文件中

引入的外部模塊

var compiler = require("vue-template-compiler")
var cache = require("lru-cache")(100)
var hash = require("hash-sum")
var SourceMapGenerator = require("source-map").SourceMapGenerator

lru-cache，lru緩存，vue1.0內部也用的

hash-sum，其簡介為Blazing fast unique hash generator，用于生成hash

soruce-map，一個我們生成sourcemap主要的依賴庫，這里用的其屬性為SourceMapGenerator的類

vue-template-compiler，模塊發現是vue內部的代碼，為src/entries/web-compiler.js文件，這個模塊是由vue的build/build.js，使用rollup生成的packager，哦? 少年好像又學到了什么。具體vue-template-compiler搞了什么，暫時不管，先標個紅

generateSourceMap函數

function generateSourceMap (filename, source, generated) {
  var map = new SourceMapGenerator()
  map.setSourceContent(filename, source)
  generated.split(splitRE).forEach((line, index) => {
    if (!emptyRE.test(line)) {
      map.addMapping({
        source: filename,
        original: {
          line: index + 1,
          column: 0
        },
        generated: {
          line: index + 1,
          column: 0
        }
      })
    }
  })
  return map.toJSON()
}

判斷空行的目的是，這樣的話，那些空白行就不會生成map，減少map體積

chrome調試的時候，那些空白行也是灰的，沒必要打斷點嘛

然后，那個換行正則也是很有意思，外服的玩家討論了一番，https://github.com/webpack/we...
結論就是g這樣的flag，js容易出問題的，比如你可以在控制臺里感受下：

var r = /
/g;
console.log(r.test("
")); // => true
console.log(r.test("
")); // => false

解決是，要嗎將正則的屬性lastIndex = 0，要嗎將g去掉

導出函數

module.exports = function (content, filename, needMap) {
  var cacheKey = hash(filename + content)
  // source-map cache busting for hot-reloadded modules
  var filenameWithHash = filename + "?" + cacheKey
  var output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: true })
  if (needMap) {
    if (output.script && !output.script.src) {
      output.script.map = generateSourceMap(
        filenameWithHash,
        content,
        output.script.content
      )
    }
    if (output.styles) {
      output.styles.forEach(style => {
        if (!style.src) {
          style.map = generateSourceMap(
            filenameWithHash,
            content,
            style.content
          )
        }
      })
    }
  }
  cache.set(cacheKey, output)
  return output
}

任務途中，突遇掉線，果然很魔力

掉線回城，東門醫院補血，繼續任務

這里舉個例子，然后理解下
index.html

src/index.js

const Vue = require("vue")
const Hello = require("./Hello.vue")

new Vue({
  el: "#app",
  components: {
    Hello: Hello
  },
  render: function(h) {
    return h(
      "Hello"
    )
  }
})

src/Hello.vue

然后以此例來分析下，

3個參數

content: Hello.vue中的文件內容

filename: Hello.vue

needMap: webpack配置中如果dev-tools使用了"source-map"... 則為true

調用compiler.parseComponent(content, { pad: true })，會解析成下面的格式，
稍微注意style是一個數組的形式，即可以有多個style標簽

然后這些標簽其實可以有src屬性，表示引入外部對應的文件，比如這里判斷了!output.script.src

{ 
  template: { 
    type: "template",
    content: "

  hello

",
    start: 10,
    end: 65 
  },
  script: {
    type: "script",
    content: "http://
//
//
//
//
//

module.exports = {
  created() {
   console.log("hello .vue file")
  }
}
",
    start: 86,
    end: 161 
  },
  styles: [
    { 
      type: "style",
      content: "














.hello {
  font-size: 12px;
}
",
      start: 186,
      scoped: true,
      end: 217 
    }
  ],
  customBlocks: [] 
}

ok，沒怎么費血瓶，順利獲取重要道具：大地翼龍的鱗片1個，下一層繼續出發