Авторизация

Средний

14 уроков

Курс

Webpack 2

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

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

Мая

2017

Автор урока:

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

комментариев

лайка

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

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

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

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

const webpack = require('webpack');

1	const webpack = require('webpack');

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

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

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',
    })
],

plugins: [

new HtmlWebpackPlugin({

filename: 'index.html',

chunks: ['index', 'common'],

}),

new HtmlWebpackPlugin({

filename: 'blog.html',

chunks: ['blog', 'common'],

}),

new webpack.optimize.CommonsChunkPlugin({

})

yarn run build

1	yarn run build

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

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

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

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

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

CommonsChunkPlugin Webpack вебпак Видеокурс Видеоурок

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

Делись:

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

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

Для отправки комментария вам необходимо авторизоваться.