Автор является одним из участников vue-loader (#16)

Официальное описание

vue-loader is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module

Проще говоря: превратите файл *.vue в *.bundle.js, а затем поместите его в браузер для запуска.

Следите за вводом и выводом

выход

После запуска теста можно получить следующий вывод, но из-за огромного размера файла автор извлекает только часть для начала анализа, как показано ниже.

/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./lib/selector.js?type=script&index=0&bustCache!./test/fixtures/basic.vue

/* harmony default export */ 
var basic = ({
  data() {
    return {
      msg: 'Hello from Component A!'
    };
  }
});
// CONCATENATED MODULE: ./lib/template-compiler?{"id":"data-v-b647d0ce","hasScoped":false,"buble":{"transforms":{}}}!./lib/selector.js?type=template&index=0&bustCache!./test/fixtures/basic.vue
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("h2", { staticClass: "red" }, [_vm._v(_vm._s(_vm.msg))])
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ var fixtures_basic = (esExports);
if (false) {
  module.hot.accept()
  if (module.hot.data) {
    require("vue-hot-reload-api")      .rerender("data-v-b647d0ce", esExports)
  }
}
// CONCATENATED MODULE: .!./test/fixtures/basic.vue
var disposed = false
function injectStyle (ssrContext) {
  if (disposed) return
  __webpack_require__(3)
}
var normalizeComponent = __webpack_require__(8)
/* script */

/* template */

/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
  basic,
  fixtures_basic,
  __vue_template_functional__,
  __vue_styles__,
  __vue_scopeId__,
  __vue_module_identifier__
)
Component.options.__file = "test/fixtures/basic.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {  return key !== "default" && key.substr(0, 2) !== "__"})) {  console.error("named exports are not supported in *.vue files.")}

})()}

Результат анализа

Вышеприведенный вывод — это javaScript, который, наконец, можно запустить в браузере.Хотя автор удалил некоторые части кода, которые повлияют на понимание, неизбежно невозможно начать, наблюдая за этим файлом напрямую.

Далее продолжаем уточнять этапы анализа.В процессе компиляции basic.vue в конечный выходной bundle.js с помощью vue-loader фактически вызываются четыре небольших загрузчика. они соответственно:

selector
style-compiler
template-compiler
babel-loader

Вышеуказанные четыре загрузчика, за исключением того, что babel-loader является внешним пакетом, остальные три существуют внутри vue-loader (lib/style-compiler и lib/template-compiler и lib/selector).

Первый загрузчик vue компилирует basic.vue в следующий

/* script */
import __vue_script__ from "!!babel-loader!../../lib/selector?type=script&index=0&bustCache!./basic.vue"
/* template */
import __vue_template__ from "!!../../lib/template-compiler/index?{\"id\":\"data-v-793be54c\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!../../lib/selector?type=template&index=0&bustCache!./basic.vue"
/* styles */
import __vue_styles__ from "!!vue-style-loader!css-loader!../../lib/style-compiler/index?{\"vue\":true,\"id\":\"data-v-793be54c\",\"scoped\":false,\"hasInlineConfig\":false}!../../lib/selector?type=styles&index=0&bustCache!./basic.vue"
var Component = normalizeComponent(
  __vue_script__,
  __vue_template__,
  __vue_template_functional__,
  __vue_styles__,
  __vue_scopeId__,
  __vue_module_identifier__
)

Для облегчения понимания автор удалил и изменил некоторый контент.

В трех операторах импорта, независимо от того, сколько разных загрузчиков они используют для загрузки, источником цепочки загрузчиков является basic.vue.

Раздел JavaScript

Сначала проанализируйте часть сценария

/* script */
import __vue_script__ from "!!babel-loader!../../lib/selector?type=script&index=0&bustCache!./basic.vue"

Справа налево, то есть basic.vue последовательно обрабатывался селектором и babel-загрузчиком.

Результатом обработки selector (тип параметра = script) является извлечение JavaScript в basic.vue и передача его загрузчику babel для обработки и, наконец, создание пригодного для использования JavaScript.

Раздел шаблона

Давайте снова проанализируем шаблонную часть

/* template */
import __vue_template__ from "!!../../lib/template-compiler/index?{\"id\":\"data-v-793be54c\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!../../lib/selector?type=template&index=0&bustCache!./basic.vue"

Точно так же, слева направо, basic.vue последовательно обрабатывается селектором и компилятором шаблонов.

Результатом обработки селектора (параметр type=template) является извлечение шаблона в basic.vue и передача его компилятору шаблонов для обработки и, наконец, вывод его в пригодный для использования HTML.

Раздел стиля

Наконец, проанализируйте часть стиля

/* styles */
import __vue_styles__ from "!!vue-style-loader!css-loader!../../lib/style-compiler/index?{\"vue\":true,\"id\":\"data-v-793be54c\",\"scoped\":false,\"hasInlineConfig\":false}!../../lib/selector?type=styles&index=0&bustCache!./basic.vue"

В стиле задействовано много загрузчиков, и мы разберем их один за другим.Из приведенного выше кода видно, что basic.vue должен последовательно обрабатываться селектором, компилятором стилей, css-загрузчиком и vue-style-загрузчиком. .

Результатом обработки селектора (параметр type=style) является извлечение css в basic.vue, а затем передача его компилятору стилей для обработки в css, а затем передача его загрузчику css для обработки и генерации модуль и, наконец, пропустите css через загрузчик vue-style-loader.<style>который затем вводится в HTML.

Обратите внимание, что style-loader здесь не используется, потому что vue-style-loader добавляет поддержку внутреннего рендеринга (SSR) на основе форка style-loader. Для конкретных различий читатели могут проверить официальные документы, и автор не будет повторять их здесь.

следовать за

Благодаря приведенному выше введению читатель должен иметь общее представление о vue-loader и роли нескольких задействованных загрузчиков.

Затем, в следующих статьях, мы начнем анализировать исходный код этих загрузчиков один за другим.

Второй селектор анализа исходного кода vue-loader
анализ исходного кода vue-loader третий компилятор стиля (письменно)
vue-loader анализ исходного кода четвертого шаблона-компилятора (письменно)

Блог автора

Автор Weibo

Авторgithub

Общий анализ серии анализа исходного кода vue-loader