vue-loader

загрузчик для webpack для компонентов Vue в одном файле

• Документация

Только для версий v17.2.1+

• experimentalInlineMatchResource: boolean: активирует Inline matchResource для соответствия правил для vue-loader.

Только для версий v16+

• reactivityTransform: boolean: активирует Vue Reactivity Transform (только для SFC).

• refSugar: boolean: удалено. используйте reactivityTransform вместо него.

• customElement: boolean | RegExp: активирует режим работы с пользовательскими элементами. В этом режиме SFC включает свои теги <style> как строки в опции styles компонента. При использовании вместе с defineCustomElement из Vue core стили будут внедрены в корневой тень пользовательского элемента.

  • По умолчанию используется регулярное выражение /\.ce\.vue$/.
  • Установка значения true приводит к обработке всех файлов .vue в режиме пользовательских элементов.

• enableTsInTemplate: boolean (16.8+): позволяет использовать TS-выражения в шаблонах при наличии атрибута lang="ts" в теге <script>. По умолчанию значение равно true.

  • При использовании вместе с ts-loader, из-за поведения кэширования ts-loader, иногда это препятствует горячему перезапуску шаблонов отдельно, что может вызвать перезагрузку компонента даже если был изменён только шаблон. Если это беспокоит, можно установить этот параметр равным false (и избегать использования TS-выражений в шаблонах).

  • Альтернативно, оставить этот параметр включенным (по умолчанию) и использовать esbuild-loader для транспиляции TS, что не страдает от этой проблемы (а также намного быстрее). Однако обратите внимание, что вам придётся полагаться на типизации TS из других источников (например, IDE или vue-tsc).

Что такое vue-loader?

vue-loader — это загрузчик для webpack, который позволяет создавать компоненты Vue в формате так называемых однофайловых компонентов (SFC):

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Привет мир!',
    };
  },
};
</script>

<style>
.example {
  color: red;
}
</style>
``

`vue-loader` предоставляет множество полезных возможностей:

- Разрешает использование других загрузчиков webpack для каждой части компонента Vue, например Sass для `<style>` и Pug для `<template>`;
- Разрешает наличие пользовательских блоков в файле .vue, которые могут иметь собственные цепочки загрузчиков;
- Обрабатывает статические ресурсы, указанные в `<style>` и `<template>`, как модульные зависимости и применяет к ним загрузчики webpack;
- Создаёт имитацию заключенного CSS для каждого компонента;
- Сохраняет состояние при горячем перезапуске во время разработки.

Кратко говоря, сочетание webpack и `vue-loader` даёт современный, гибкий и крайне мощный рабочий процесс для создания приложений Vue.js.

## Как это работает

> следующий раздел предназначен для поддерживаемых и участников, заинтересованных в деталях внутренней реализации `vue-loader`, и **не является обязательной информацией для конечных пользователей**.

`vue-loader` не является простым загрузчиком преобразования исходного кода. Он обрабатывает каждый язык внутри SFC с помощью своей собственной цепочки загрузчиков (можно представить каждый блок как «виртуальный модуль»), и затем собирает все блоки в окончательный модуль. Вот краткое описание того, как всё это работает:

1. `vue-loader` парсит исходный код SFC в объект SFC-описания с помощью `@vue/compiler-sfc`. Затем он создаёт импорт для каждого языкового блока, так что фактический возвращаемый модуль выглядит следующим образом:

   ```js
   // код, возвращаемый основным загрузчиком для 'source.vue'

   // импортировать блок <template>
   import render from 'source.vue?vue&type=template'
   // импортировать блок <script>
   import script from 'source.vue?vue&type=script'
   export * from 'source.vue?vue&type=script'
   // импортировать блоки <style>
   import 'source.vue?vue&type=style&index=1'

   script.render = render
   export default script

Обратите внимание, как код импортирует source.vue сам, но с различными запросами для каждого блока.

2. Мы хотим, чтобы содержимое блока script было обработано как файлы .js (и если это <script lang="ts">, мы хотим, чтобы его обрабатывали как файлы .ts). То же самое для других языковых блоков. Поэтому мы хотим, чтобы webpack применил любые настроенные правила модулей, соответствующие .js, также к запросам, которые выглядят как source.vue?vue&type=script. Это то, что делает VueLoaderPlugin (src/plugins.ts): для каждого правила модуля в конфигурации webpack создаётся клонированное правило, которое нацелено на соответствующие запросы блоков языка SFC.

   Предположим, что мы настроили babel-loader для всех *.js файлов. Это правило будет клонировано и применено к блокам <script> SFC Vue тоже. Внутри webpack запрос типа

   import script from 'source.vue?vue&type=script'

   Раскроется до:

   import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

   Обратите внимание, что vue-loader также совпадает, поскольку vue-loader применяются к .vue файлам.

   Аналогично, если вы настроили style-loader + css-loader + sass-loader для *.scss файлов:

   <style scoped lang="scss">

   Будет возвращено vue-loader как:

   import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

   И webpack раскроет его до:

   import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

3. Когда обрабатываются раскрытые запросы, основной vue-loader снова запускается. На этот раз, однако, загрузчик замечает, что запрос имеет параметры и нацелен на конкретный блок. Так что он выбирает (src/select.ts) внутреннее содержимое целевого блока и передаёт его дальше загрузчикам, соответствующим после него.

4. Для блока <script> это почти всё. Для блоков <template> и <style> требуется выполнить несколько дополнительных задач: - Нужно скомпилировать шаблон с помощью компилятора шаблонов Vue;

   • Нужно выполнить постобработку CSS в блоках <style scoped>, после css-loader, но до style-loader.

   Технически, эти являются дополнительными загрузчиками (src/templateLoader.ts и src/stylePostLoader.ts), которые должны быть внедрены в раскрытую цепь загрузчиков. Это было бы очень сложно, если бы конечные пользователи должны были настраивать это самостоятельно, поэтому VueLoaderPlugin также внедряет глобальный Pitching Loader (src/pitcher.ts), который перехватывает запросы Vue <template> и <style> и внедряет необходимые загрузчики. Конечные запросы выглядят следующим образом:

   // <template lang="pug">
   import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'
   
   // <style scoped lang="scss">
   import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'