Курс по Webpack. Основы 2017
Данный курс предназначен почти для всех, кто занимается веб технологиями. Вы познакомитесь с основами такого мощного инструмента как webpack, а точнее с его новой версией webpack 2.
Данный курс очень подробно разбирает эту технологию, с разбора что это такое, где оно применяется, как его установить и так далее.
После выяснения основ данной технологии, мы разберем какие есть сторонние решения для увеличения функционала webpack. И также поговорим про то, как максимально просто и эффективно настроить сервер для разработки с использованием данной технологии.
В результате курса вы сможете легко работать с webpack, будете знать как сильно вы можете оптимизировать ваш процесс разработки с ним, начиная от скорости разработки, заканчивая сильным ускорением вашего приложения. И вы сможете писать любые задачи webpack, от оптимизации JavaScript до компилирования препроцессоров с сервером автоматической перезагрузки окна браузера.

Урок 1. Webpack. Что такое Webpack:
От автора: с этого урока мы начнем знакомство с таким универсальным инструментом, как webpack, который используется почти во всех современных приложениях для оптимизации и упрощения процесса разработки.
Из данного урока вы узнаете, что такое webpack, где он используется, какие проблемы решает. Вы узнаете, чем отличается webpack от таск раннеров типа grunt и gulp. Узнаете особенность работы webpack с различными сущностями, его области применения и способ интеграции с другими инструментами.
В процессе урока мы разберем какие типы модулей нативно поддерживает webpack, с какими пакетными менеджерами он может работать и что такое hot module replacement. А также мы разберем алгоритм работы webpack на примере сборки javascript файлов.


Урок 2. Webpack. Установка Webpack и первый запуск:
От автора: в этом уроке мы перейдем от теории webpack уже непосредственно к практике и сделаем установку и соберем простой проект.
Из данного урока вы узнаете как установить webpack с помощью пакетного менеджера npm. Далее мы с вами на основе простого проекта с 4мя зависимостями запустим webpack и разберем что из себя представляет получившийся файл.
В результате урока мы установим глобально webpack на компьютер, а далее получим готовый сгенерированный файл webpack’ом и запустим его на платформе nodejs. Также мы разберем 2 варианта консоли, откуда можно запустить webpack.


Урок 3. Webpack. Командные интерфейсы webpack:
От автора: помимо базовой возможности сборки проекта в один файл у webpack есть удобные командные интерфейсы, которые позволяют делать сборку с определенными опциями, которые мы рассмотрим в этом уроке.
Из урока вы узнаете как из терминала использовать командные интерфейсы webpack для того, чтобы улучшить сборку проекта. Например, уменьшение размера файла более чем в 4 раза, и на это вам потребуется всего лишь 2 секунды!
В результате мы рассмотрим самые базовые интерфейсы webpack для минификации javascript файлов, добавления исходных карт, стилизации консоли и непрерывная пересборка проекта при изменении файлов.


Урок 4. Webpack. Работа с NPM:
От автора: webpack поддерживает различные типы модулей в javascript и нативно умеет работать с пакетными менеджерами, например с npm, о котором и будет данный урок.
Из этого урока вы узнаете как webpack работает с модулями или библиотеками, установленными с помощью пакетного менеджера npm.
В результате данного урока мы создадим файл package.json, далее установим нам на проект библиотеку jquery, и соединим код нашего проекта с библиотекой с помощью webpack.


Урок 5. Webpack. Webpack Config:
От автора: управлять webpack постоянно из консоли неудобно, из-за дублирования кода, траты времени и малой возможности конфигурации. Для этого мы разберем основной файл настроек — webpack.config.
Из этого урока вы узнаете как создать webpack config для задания статической и более продвинутой конфигурации webpack уже не в консоли, как это делалось ранее, а внутри javascript файла.
В результате данного урока мы разберем несколько полей webpack config — точку входа, контекст, выходной файл и поговорим про расширения файлов по умолчанию.


Урок 6. Webpack. Множественные точки входа:
От автора: бывают ситуации, когда на сайте у вас несколько страниц, для которых описаны свои скрипты и они еще используют общие функции других компонентов. Для генерации скрипта, под каждую страницу отлично подойдет webpack.
Из урока вы узнаете, как задать в webpack множественную точку входа — изменить entry из строки на объект, для создания не одного выходного файла, а нескольких, например, каждый скрипт под одну страницу.
В результате урока мы зададим настройку webpack так, чтобы на выходе получить 3 файла абсолютно независимых скриптов, которые используют общие модули и они будут для каждой отдельной страницы.


Урок 7. Webpack. Исходные карты:
От автора: когда мы делаем сборку webpack все файлы объединяются в один файл, что ускоряет скорость загрузки страницы. Но из-за этого нет возможности удобно смотреть исходный код скрипта, так как он скомпилирован. Для этого в webpack есть исходные карты, о которых и пойдет речь в этом уроке.
Из урока вы узнаете, как с помощью webpack config задать исходные карты, для более удобного дебаггинга исходного кода.
В результате урока мы разберем 2 типа встроенных типов исходных карт: eval и source-map и посмотрим, чем они отличаются.


Урок 8. Webpack. Как подключать плагины:
От автора: webpack – это очень мощный инструмент, который поддерживает нативно большое количество возможностей. Однако есть возможность расширить его функциональность плагинами.
Из урока вы узнаете, как можно расширить функциональность webpack с помощью плагинов, узнаете как их подключать и в чем их особенность.
В результате урока мы установим дополнительную библиотеку, плагин для webpack — Case Sensitive Paths Webpack Plugin и подключим его к конфигу. На примере этого плагина мы разберем как избежать некоторых ошибок при разработке на разных операционных системах.


Урок 9. Webpack. Uglify Js Plugin:
От автора: для расширения функционала webpack нужно использовать плагины, но стоит учесть, что существуют как сторонние плагины, так и встроенные в сам webpack.
Из урока вы узнаете, как пользоваться плагинами, которые встроены в сам webpack.
В результате данного урока мы подключим webpack локально в файле настроек, подключим Uglify Js Plugin и с помощью него будем делать минификацию нашего проекта.


Урок 10. Webpack. Define & Provide Plugins:
От автора: в данном уроке мы разберем 2 новых плагина, которые есть в webpack для задания глобальных переменных.
Сборщик webpack устроен так, что все переменные которые в нем есть будут локальными, то есть ничего не будет находится в глобальной области видимости. Однако порой бывает очень удобно завести глобальную переменную или например, вынести библиотеку в глобальную область видимости для проекта, чтобы каждый раз не подключать ее, если она используется довольно часто. Для этого мы разберем 2 встроенных плагина в webpack для решения данной задачи.
В результате данного урока подключим и настроим 2 webpack плагина — Define Plugin и Provide Plugin, а также вы увидите какие особенности при их подключении стоит учесть.


Урок 11. Webpack. HTML Webpack Plugin:
От автора: для еще большей оптимизации webpack можно с помощью стороннего плагина генерировать html файл, который самостоятельно подключит скрипт.
В данном уроке вы познакомитесь еще с одним часто используемым webpack плагином — HTML Webpack Plugin, который позволяет генерировать html файл с уже подключенным скриптом.
В результате урока мы подключим HTML Webpack Plugin и разберем его основные настройки — как создавать HTML файл на основе шаблона, как указывать номер сборки или хеш скрипта для оптимизации загрузки страницы путем кеширования.


Урок 12. Webpack. Commons Chunks Plugin:
От автора: данный урок посвящен, пожалуй, самому сложному, но при этом очень полезному плагину, который позволяет находить общие компоненты и выносить их в отдельный файл для оптимизации.
В данном уроке вы познакомитесь еще с одним довольно сложным webpack плагином — Commons Chunks Plugin. Он один из самых сложных, но при этом полезных плагинов для оптимизации вашего проекта. Он позволяет находить общие компоненты и выносить их в отдельные файлы для предотвращения дублирования кода и благодаря браузерному кешированию загрузка страницы будет довольно высокой.
В результате урока мы подключим Commons Chunks Plugin в webpack и разберем его на 2х примерах — с библиотеками и с пользовательскими модулями.


Урок 13. Webpack. Loaders:
От автора: с этого урока мы начинаем изучать, пожалуй, одну из самых основных возможностей webpack — loaders, благодаря которым есть возможность работать с любыми типами файлов.
Из урока вы узнаете, что такое Loaders, как их подключить и как с ними работать.
В результате урока мы напишем маленький проект на TypeScript и с помощью webpack будем компилировать TypeScript в JavaScript через loaders. Также мы установим специальный лоадер на проект для реализации данной возможности.


Урок 14. Webpack. CSS Loaders. ExtractTextPlugin:
От автора: в данном уроке мы поговорим про то, как в webpack работать с css файлами и правильно их преобразовывать, так как webpack работает только с javascript.
Из урока вы узнаете, как работать с css файлами в webpack с помощью css loader. Помимо этого мы подключим специальный плагин ExtractTextPlugin, который позволяет выносить из javascript css код в отдельный css файл.
В результате урока мы настроим webpack так, чтобы он корректно мог обрабатывать css файлы, и разберем 2 варианта работы с ними, вынос в отдельный файл и применение css свойств внутри javascript.


Урок 15. Webpack. Less Loader:
От автора: в данном уроке мы поговорим про то, как с помощью webpack делать компиляцию препроцессоров, и рассмотрим мы это на примере препроцессора less.
Из урока вы узнаете, как с помощью webpack компилировать препроцессоры с помощью npm модуля — less loader.
В рамках данного урока мы настроим weback так, чтобы он компилировал препроцессор Less, объединял все в один файл и выносил все стили из javascript в css файл.


Урок 16. Webpack. Export и Expose Loaders:
От автора: порой нужно поддерживать старый код без его изменения. Для этого есть два лоадера, которые облегчат совместимость с webpack.
Из урока вы познакомитесь с двумя полезными лоадерами — Expose и Export. Они по большей части нужны для поддержки старого кода, без его изменения.
В рамках данного урока мы на примере узнаем, как экспортировать любые константы, если они не экспортируются в самом файле. А также поговорим про то, как вынести библиотеку в глобальную область видимости, но уже не для проекта, а даже для клиента в браузере.


Урок 17. Webpack. Strip Loader:
От автора: часто на проекте мы используем различные дебаг функции, например алерт или консоль. Но клиенту не нужно их показывать, а каждый раз удалять не очень удобно. Процесс можно автоматизировать с помощью webpack.
Из урока вы познакомитесь с очень полезным лоадером, который позволяет сильно облегчить процесс дебаггинга, ускорить процесс разработки и сделать код проекта чище — Webpack Strip Loader.
В ходе данного урока мы на практике увидим, как удалить любые конструкции в javascript без прямого удаления их из кода, а средствами webpack с помощью strip loader.


Урок 18. Webpack. File Loader:
От автора: javascript не позволяет работать с файлами, так как он работает только в браузере, и это добавляет определенные ограничения, однако, с помощью webpack мы очень просто можем решить данную задачу.
Из урока вы познакомитесь с очень полезным лоадером, который позволяет работать с файлами в javascript. Речь идет о File Loader. С помощью него вы сможете загружать в любой javascript файл файл с любым расширением, будь то картинка или json данные.
В результате данного урока мы настроим webpack так, чтоб с помощью file loader он мог загружать картинки в javascript и дальше работать с ними.


Урок 19. Webpack. Webpack Dev Server:
От автора: при разработке современного front end приложения нужно учитывать, что для большинства задач нам нужен сервер, который поддерживать работу приложения. Чтобы не настраивать сервер самому, у webpack есть свое собственное решение данной задачи.
Из урока вы познакомитесь с дополнительным модулем от разработчиков webpack — webpack dev server. Это сервер, для загрузки вашего приложение, которое очень просто синхронизируется с webpack скриптами. То есть нам не нужно настраивать свой собственный сервер, например, на nodejs, а решить данную задачу мы сможем за 2 минуты.
В результате данного урока мы глобально установим webpack dev server и настроим его со сборщиком webpack.


Урок 20. Webpack. Hot Module Replacement:
От автора: при разработке современного front end приложения мы пользуемся сервером и часто меняем исходный код приложения. Чтобы каждый раз не пересобирать скрипт целиком и самостоятельно не перезагружать страницу в браузере, в webpack есть нативная возможность автоматизировать данный процесс.
Из урока вы познакомитесь с очень полезной особенностью webpack — hot module replacement. Это возможность пересобрать ваш проект, при изменении исходного кода приложения автоматически и применить все эти изменения, без перезагрузки страницы браузера!
В результате данного урока мы настроим систему hot module replacement совместно с webpack dev server и увидим как все это работает на примере css стилей.