#11 — CommonsChunkPlugin — плагин, который выносит общий код из css- и js-файлов
Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать webpack 2.
В Webpack встроен очень полезный плагин CommonsChunkPlugin, позволяющий автоматически выносить общий код из разных javascript- и css-файлов. Устанавливать отдельно ничего не нужно. Давайте приступим.
Полезная ссылка
https://webpack.js.org/plugins/commons-chunk-plugin/
Сначала в webpack.congig.js добавим константу с самим вебпаком.
|
1 |
const webpack = require('webpack'); |
В common, в раздел plugins записываем “new webpack.optimize.CommonsChunkPlugin” и даём ему имя “common”.
В файл с именем common будет автоматически выноситься общий код для всех страниц.
Для HtmlWebpackPlugin нужно в свойстве chunks также добавить «common», чтобы в шаблон подключился common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug' }), new HtmlWebpackPlugin({ filename: 'blog.html', chunks: ['blog', 'common'], template: PATHS.source + '/pages/blog/blog.pug' }), new webpack.optimize.CommonsChunkPlugin({ name: 'common', }) ], |
|
1 |
yarn run build |
В папке build в каталогах JS и CSS появились файлы common.js и common.css соответственно. В них Webpack вынес весь повторяющийся код.
Плюс отдельных файлов заключается в том, что загрузившись один раз в браузер клиента, они будут закешированы и не будут грузиться заново повторно на остальных страницах.
На этом одиннадцатый видеоурок курса по изучению Webpack 2 подойдет к концу.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!