vue-loader解析

前言

最近在作一個玩具，其中用到了vue結構。

本文主要簡單介紹下Webpack的loader具體作了些什麼，而後簡單解析一下vue-loader。

正文

webpack的loader

首先先介紹一下Webpack的loader到底是什麼，按照官網的說法，簡單來講loader是讓其餘類型的文件轉換成webpack能理解的js代碼的一段代碼（函數）。

Out of the box, webpack only understands JavaScript files. Loaders allow webpack to process other types of files and converting them into valid modules that can be consumed by your application and added to the dependency graph.

讓咱們從最簡單的raw-loader出發，來看看loader究竟作了什麼，raw-loader源碼。能夠看到一個loader就是一個函數，輸入是文件內容，輸出是一段commonJS模塊代碼。

raw-loader源碼

而後咱們在webpack中設置文件的loader就能夠直接在js代碼中經過import或者require直接引用這類非js文件了。

vue-loader

同理vue-loader也同樣，vue-loader輸入一個vue文件內容，而後輸出一個js模塊。以下圖分別爲vue文件內容以及通過vue-loader處理後的內容。

vue文件內容

vue-loader處理結果

其中beforeCreate、beforeDestory、render爲vue-loader本身加的，在這個例子中其內容分別爲

// beforeCreate(injectStyle)
function injectStyle (context) {
  if (disposed) return
  require("!!vue-loader/node_modules/vue-style-loader!css-loader?sourceMap!../node_modules/_vue-loader@14.2.2@vue-loader/lib/style-compiler/index?{\"optionsId\":\"0\",\"vue\":true,\"id\":\"data-v-6a905bfa\",\"scoped\":true,\"sourceMap\":true}!sass-loader!../node_modules/_vue-loader@14.2.2@vue-loader/lib/selector?type=styles&index=0!./index.vue")
}

// beforeCreate(anonymous)
function() {
  var record = map[id]
  if (!record.Ctor) {
    record.Ctor = this.constructor
  }
  record.instances.push(this)
}

// render
// Note: render函數基本上是template函數轉換而成的，_c和_h不是本篇要討論的內容，只須要知道render返回一個vnode
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("p", [_vm._v("vue 測試")]),
      _vm._v(" "),
      _c("p", [_vm._v("訪問了" + _vm._s(_vm.city))]),
      _vm._v(" "),
      _c("button", { on: { click: _vm.visit } }, [_vm._v("訪問")]),
      _vm._v(" "),
      _c("component-test")
    ],
    1
  )
}
複製代碼

如今咱們大體瞭解了vue-loader處理事後的模塊實際上是一個js對象，主要包括render、components以及其餘本身寫的內容以及一些自動生成的鉤子函數。

其中template、script、style的解析經過vue-template-compiler實現，主要調用parseComponent