как webpack создает проект vue.js - PullRequest
Новая
       12

как webpack создает проект vue.js

0 голосов
/ 03 сентября 2018

Мой вопрос связан с веб-пакетом. Допустим, я использую webpack и проект vue.js. Как webpack создает проект, когда я запускаю npm run build. Я знаю, что есть папка сборки, куда нужно добавить файлы конфигурации, и будет папка вывода dist, которая сохранит мой окончательный проект.

Вопрос 1) Что делает вебпак? Ищет ли он точку входа в конфигурационном файле, чтобы он знал, с чего начать процесс сборки? для vue.js это src / main.js. Я прав?

ВОПРОС 2) когда он находит main.js, что он делает? он идет от main.js к вершине, чтобы найти все зависимости?

ВОПРОС 3) Допустим, он нашел файл .vue. Что это делает? он разделяет код js - поместите его в какой-нибудь другой файл js, затем разделите css и поместите его в другой файл css? или просто взять весь код .vue и поместить его в файл js (со всеми его HTML и так далее)?

ВОПРОС 4) Просто нужно, чтобы эта строка кода показала мне ВОПРОС 3) ответ.

1 Ответ

0 голосов
/ 03 сентября 2018
  1. Да, у веб-пакета есть точка входа (entry раздел из конфигурации). Это не src/main.js точно, это настраивается.
  2. Он строит дерево зависимостей, начиная с точки входа.

  3. Он будет обрабатываться загрузчиками в указанной вами последовательности. Обычно это vue-loader, который преобразует файлы vue в js, затем он переходит на babel-loader, который переносит ваш диалект js (Flow / ES6 / ES2017 / TS) в ES5, затем на js-loader, который может окончательно разбить весь код на зависимости и продолжить загрузку.

    Разделение CSS может быть выполнено с помощью плагинов веб-пакетов, таких как ExtractTextWebpackPlugin, и тогда ваш диалект CSS (LESS / SASS / PostCSS и т. Д.) Будет преобразован с помощью загрузчиков, то есть sass-loader, css-loader, style-loader.

  4. Если плагин для извлечения стилей отсутствует, он будет распространять css вместе с js и помещать его в стили головы.
...