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

#11 — CommonsChunkPlugin — плагин, который выносит общий код из css- и js-файлов

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

В Webpack встроен очень полезный плагин CommonsChunkPlugin, позволяющий автоматически выносить общий код из разных javascript- и css-файлов. Устанавливать отдельно ничего не нужно. Давайте приступим.

Полезная ссылка
https://webpack.js.org/plugins/commons-chunk-plugin/

Сначала в webpack.congig.js добавим константу с самим вебпаком.

В common, в раздел plugins записываем “new webpack.optimize.CommonsChunkPlugin” и даём ему имя “common”.
В файл с именем common будет автоматически выноситься общий код для всех страниц.

Для HtmlWebpackPlugin нужно в свойстве chunks также добавить «common», чтобы в шаблон подключился common.js.

В папке build в каталогах JS и CSS появились файлы common.js и common.css соответственно. В них Webpack вынес весь повторяющийся код.

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

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

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

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

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

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

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

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