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

#13 — UglifyJsPlugin — плагин для минифицирования js-кода

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

Ещё один полезный инструмент, встроенный в Webpack, называется UglifyJsPlugin. Он сможет минифицировать весь наш javascript-код. UglifyJsPlugin имеет целый ряд настроек, с которыми вы можете ознакомиться на сайте официальной документации.

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

Полезные ссылки:

http://survivejs.com/webpack/optimizing-build/minifying/
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#usage

UglifyJsPlugin на практике

Создадим файл для конфигурации.

Вставим в него заготовленный мною код. Ничего сложного в нём нет. Мы инициализируем новый плагин UglifyJsPlugin с двумя настройками: включим сорсмапы и выключим предупреждения.

js.uglyfy.js

Вызовем uglifyJS в webpack.config.js и добавим в блок продакшен.

Соберем проект для продакшена и посмотрим на результат, заглянув в папку build.
Все javascript-файлы приняли минифицированный вид.

Запустим ноде-сервер, чтобы убедиться, что всё работает как и раньше. Откроем браузер, убедимся в отсутствии ошибок.

И по традиции сохраним промежуточный шаг, сделав очередной коммит.

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

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

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

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

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

One thought on “#13 — UglifyJsPlugin — плагин для минифицирования js-кода

  1. luckyluck:

    А как же быть с ES6? Uglify не поддерживает.

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

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