Эй! Это продолжение главы 1, где мы настроили наш первый webpack.config.js и получили его компилировать. Ура! Но мы хотим большего, мы хотим использовать webpack в полной мере и изучить каждую функцию.

Напоминание - на этом мы остановились.

Как мы следим за изменениями?

Прямо сейчас мы в рассоле. Нам нужно повторно запускать нашу задачу компиляции каждый раз, когда мы вносим изменения. Противно ... давайте исправим - это так просто!

Мы можем указать аргументы для веб-пакета - введите webpack -help в терминале. Вот что мы должны увидеть.

Как вы заметили, в webpack есть команда --watch или --w для краткости. Мы можем следить за изменениями! Очень круто!

Давай попробуем! введите команду часов в своем терминале.

webpack --watch

Давайте добавим новое предложение к нашему index.js - убедитесь, что webpack работает с методом часов!

Откройте index.html с помощью и wolaa!

Прежде чем мы продолжим, давайте добавим наш метод просмотра webpack в сценарии npm.

Теперь мы можем использовать npm run watch для наших часов webpack!

Круто, но не впечатляет. Что еще дает Webpack? Мне нравится ваша инициатива!

ES2015, подборка с Babel

Было бы неплохо использовать стрелочные функции () => {} с оператором распространения ... и, вероятно, самую удобную новую функцию, о которой большинство из вас, вероятно, слышали, - единственный и неповторимый class {} синтаксический сахар. Синтаксический сахар? Это новый тренд на кофе для хипстеров? Почти… в основном class {} действительно использует prototype под капотом.

Следуя этому замечательному руководству от babel, мы можем скомпилировать наш ES6 в ES5.

Начните с установки babel-loader и babel-core зависимостей.

npm install --save-dev babel-loader babel-core

Давайте откроем наш webpack.config.js и напишем пару строк кода.

Нам нужно как-то использовать babel-loader. Что такое загрузчик? В официальной документации все сделано идеально - в webpack действительно хорошая документация, не бойтесь погрузиться в нее!

Загрузчики позволяют предварительно обрабатывать файлы по мере require() или« загружать их. Загрузчики подобны задачам в других инструментах сборки и обеспечивают мощный способ обработки шагов сборки внешнего интерфейса. Загрузчики могут преобразовывать файлы с другого языка, например CoffeeScript, в JavaScript, или встроенные изображения в качестве URL-адресов данных. Загрузчики даже позволяют делать такие вещи, как require() css-файлы, прямо в вашем JavaScript! »

Спасибо, мистер умник, мы приступаем к написанию нашего первого загрузчика.

module: {
    rules: [{
      test: /\.js$/, // files ending with .js
      exclude: /node_modules/, // exclude the node_modules directory
      loader: "babel-loader" // use this (babel-core) loader
    }]
  }

Указываем загрузчик и набор правил. Webpack ищет все файлы, заканчивающиеся на .js, и компилирует их с babel-loader

Запустим наш веб-пакет.

Оно работает. Можем ли мы это проверить? Конечно, будь моим гостем.

Оно работает. Но нам все еще нужно сделать одну вещь. Нам нужно явно указать babel, что и когда использовать. Мы можем сделать это, используя .babelrc файл и плагины с предварительными настройками babel. Я знаю, что это сложно проглотить, но продолжайте учиться вместе со мной, у вас все отлично. Я не буду слишком углубляться в предустановки babel - просто знайте, что они представляют собой набор предопределенных правил, и нам нужно передать их нашему babel, чтобы он знал, что делать.

Мы собираемся использовать пресет babel-preset-es2015.

npm install --save-dev babel-preset-es2015

Далее нам нужно создать наш .babelrc файл.

Давайте откроем его и укажем наши правила / предустановки.

круто, давай наконец-то проверим. Я напишу код ES6 и скомпилирую его.

Убедитесь, что у вас запущен веб-пакет! npm run watch если вы забыли команду!

Оно работает! Гоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо Теперь мы можем успешно писать код ES6, не беспокоясь о проблемах совместимости! Далее мы сосредоточимся на компиляции наших стилей.

Компиляция SCSS в CSS

Легкий! Нам просто нужно добавить пару зависимостей и указать загрузчик.

npm i --save-dev sass-loader node-sass css-loader style-loader

Справа налево sass-loader компилирует SCSS, css-loader позволяет нам требовать SCSS, а style-loader вставляет его на нашу страницу.

Наш файл webpack растет и нет проблем. Он по-прежнему управляем, как только он наберет более 200 строк, нам нужно будет разбить его на разные файлы. Но не волнуйтесь, это, вероятно, будет часть III или даже часть IV.

Давайте сделаем наш .scss файл.

touch styles.scss

Напишем немного SCSS?

Затем потребуйте scss файл.

Убедитесь, что ваш веб-пакет работает, и давайте посмотрим на наши изменения!

Аккуратный! Оно работает!

Резюме

Пока что мы выяснили, как сделать так, чтобы webpack отслеживал изменения, настраиваемый сценарий npm, babel, babel-presets, загрузчики веб-пакетов, ES6 - ES5, SCSS - CSS.

Отличная работа, продолжайте учиться! Спасибо, что дожили до конца! Ты обалденный!

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

Следующая глава здесь!

Не стесняйтесь поправлять меня, если необходимо!

"Исходный код"