Средний
14 уроков
Курс
Webpack 2
Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool&LoftBlog Дмитрия Ковальчука.

#7 — Разделяем конфиг на модули в Webpack

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack. У нас уже 7-ой по счету видеоурок по Webpack.

На предыдущем видеоуроке мы научились делить config webpack на части и склеивать необходимые объекты. Как вы заметили, у этого способа есть некоторые недостатки. Для “склеивания” объектов нам приходится пользоваться не очень наглядным методом Object.assign, а если учесть, что конфиг состоит не только из объектов, но и из массивов (plugins:[]), то вполне вероятно, что вскоре нам понадобится ещё один метод Array.concat. Чтобы упростить жизнь, давайте воспользуемся небольшим инструментом “webpack-merge”. Из названия уже ясно, что данный плагин облегчит нам склеивание. Но перед тем, как начать использовать webpack-merge, давайте сделаем кое-что ещё.

Я предлагаю разделить конфиг на разные файлы или модули. Для каждой задачи будет свой отдельный модуль. Такой подход получил широкую популярность в gulp, в том числе мне он очень нравится. Так вместо огромного файла конфигурации у нас получится конструктор лего, из которого мы сможем собирать то, что вздумается. Из проекта в проект мы будем брать только те части конструктора, которые нам нужны в конкретном случае.

Создадим папку “Webpack” и в нее будем складывать все отдельные конфиги.

Установим webpack-merge, сохранив его в devDependencies.

Теперь очистим терминал и создадим модули для девсервера и паг.

Вынесем конфигурацию WDS “developmentConfig” в файл devserver.js

Здесь и далее для конфигурации webpack мы будем использовать Commonjs модули, встроенные в node.js.
Возвращать мы будем объект, который позже будем склеивать с остальной частью конфига при помощи webpack-merge.

Затем проделаем аналогичные действия и с pug-loader. Вынесем необходимый код в файл pug.js

В файле config.webpack.js мы первым делом вызовем webpack-merge и поместим его в переменную merge. Затем созданные на предыдущем шаге модули также поместим в соответствующие переменные. Напомню, что нам нет необходимости указывать точку js на конце названия файла. Node.js и так поймет, что нам нужно.

Далее эти переменные поместим в соответствующие объекты. Pug пойдёт в common, т.к. он одинаково понадобится для продакшена и разработки. А вот девсервер нужен только для разработки. Не забывайте круглые скобки в конце, чтобы функция модуля вернула необходимый объект.

А теперь вместо object.assigne воспользуемся webpack-merge так, как это рекомендуется в документации плагина webpack-merge. Мы просто передаём массив объектов, которые нужно склеить.

Давайте проверим, всё ли работает. Как обычно, запустим сначала webpack-dev-server.

Ошибка! Я сделал что-то не так. Ну, конечно! Я вставил в common, прямо в тело модуля, другой объект — pug. А нам нужно склеить исходный common-объект и pug. И делать это мы будем при помощи всё того же webpack-merge. Внесём необходимые правки и запустим webpack-dev-server ещё раз.

Откроем браузер и выполним проверку работы livereload. Традиционно поменяем заголовок у index.pug. Отлично, всё работает.

А теперь выполним сборку проекта

и запустим node static.

Отлично и здесь всё в порядке. По традиции, сделаем коммит.

Подведём итоги. С этого момента каждую новую задачу, связанную, например с компиляцией SASS, подключением svg и пр., мы можем выносить в отдельный модуль (= файл) и помещать в папку Webpack, сохраняя тем самым конфиг максимально компактным и наглядным.

На этом подойдет к концу седьмой видеоурок курса по изучению Webpack.

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#7 — Разделяем конфиг на модули в Webpack

  1. Viorel:

    Привет, Дмитрий,

    при запуске yarn run start, в консоли пишет

    «webpack-dev-server» не является внутренней или внешней командой,

    исполняемой программой или пакетным файлом, и не запускается как решить проблему?

     

     

  2. Дмитрий Ковальчук:

    Мне нужно посмотреть ваш файлик package.json чтобы я мог ответить

Добавить комментарий

Рекомендуемые курсы