Курс по Webpack4+. Вводный урок:
В данном курсе вы познакомитесь с последней версией технологии WebPack. Что такое Webpack? Webpack – это технология, которая применима для веб-разработки, с помощью которой вы можете собирать весь ваш проект и максимально оптимизировать все составляющие.
Вы одновременно можете получить возможность модульности для JavaScript файлов с ES6 синтаксисом, компилировать любой тип файлов, например TypeScript, CoffeScript, Sass, Less, Ecmascript6 и т.д.
В данном курсе вы создадите приложение, в котором будут показана реализация всех базовых и часто используемых задач при современной веб разработке: модульность, компиляция препроцессоров, компиляция TypeScript, работа с React jsx, Babel, локальный сервер для разработки, работа с любым типом файлов и два режима сборки проекта.


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


Урок 2. Webpack 4+. Модули и оптимизация сборки:
От автора: в этом уроке вы узнаете, как Webpack работает с модулями и как настроить разные сборки.
В этом уроке вы познакомитесь с модулями, которые Webpack поддерживает “из коробки”, а также научитесь настраивать разные режимы для работы Webpack. В результате урока вы напишите 4 разных модуля с разными возможностями и импортов-экспортов, используя ES6 синтаксис.


Урок 3. Webpack 4+. Плагины и создание HTML-файла:
От автора: в этом уроке вы познакомитесь с таким понятием, как плагины в Webpack. Они служат для того, чтобы расширять базовый функционал и добавляют новые возможности.
В результате урока вы подключите плагин, который будет автоматически генерировать HTML-файл, подключающий сформированый скрипт.


Урок 4. Webpack 4+. Работа с библиотеками:
От автора: в этом уроке вы узнаете, как работать со сторонними модулями и библиотеками, используя Webpack.
В этом уроке вы увидите, как подключаются любые библиотеки с помощью Webpack в финальный бандл. В результате урока вы установите библиотеку jQuery и подключите к общему бандлу.


Урок 5. Webpack 4+. Работа со стилями:
От автора: в этом уроке вы перейдете к стилям и узнаете способ, как работать с CSS, используя Webpack.
Учитывая, что Webpack умеет работать только с JavaScript, вы познакомитесь с таким понятием как лоадеры, которые позволяют работать с любыми расширениями, переводя их в JavaScript.


Урок 6. Webpack 4+. Стили в отдельном файле:
От автора: в этом уроке вы узнаете, как вынести инлайн стили в отдельный CSS-файл.
Помимо этого, вы разберете способ сборки стилей в режиме разработки, без оптимизации, и сжатые стили, в режиме продакшн билда.


Урок 7. Webpack 4+. Webpack Dev Server:
От автора: в этом уроке вы узнаете про дополнительный модуль в Webpack, который предоставляет локальный сервер для разработки приложения.
В этом уроке вы узнаете, как установить и настроить локальный сервер для разработки webpack-dev-server, поддерживающий автоперезагрузку проекта и который настраивается 4-мя строками.


Урок 8. Webpack 4+. Настройка Babel:
От автора: в этом уроке вы узнаете, как настроить компиляцию проекта, используя Babel js. Babel компилирует javascript код в более старые версии для того, чтобы большее количество браузеров понимало ваше приложение при том, что при разработке вы будете использовать самые последние возможности языка, которые даже могут быть экспериментальными.


Урок 9. Webpack 4+. Компиляция Less:
От автора: в этом уроке вы узнаете, как настроить Webpack для того, чтобы он мог компилировать препроцессор Less на лету и сразу же показывать результат в браузере.
Препроцессор Less – это инструмент, расширяющий возможности обычного CSS и позволяющего писать более оптимизированный и удобный код.


Урок 10. Webpack 4+. Компиляция Sass:
От автора: в этом уроке вы узнаете, как настроить Webpack для того, чтобы он мог компилировать препроцессор Sass на лету и сразу же показывать результат в браузере.
Препроцессор Sass – это инструмент, расширяющий возможности обычного CSS и позволяющего писать более оптимизированный и удобный код.


Урок 11. Webpack 4+. Компиляция React JSX:
От автора: очень часто при разработке приходится сталкиваться с разными инструментами, нуждающимися в компиляции, один из которых — специальный синтаксис библиотеки ReactJS – JSX.
В этом уроке вы узнаете, как настроить Webpack для того, чтобы он мог компилировать специальный синтаксис ReactJS — JSX. В результате урока вы перепишите приложение на ReactJS и настроите Webpack, который будет преобразовывать JSX в обычный JavaScript.


Урок 12. Webpack 4+. Компиляция TypeScript:
От автора: еще один часто используемый в современном вебе инструмент — язык Typescript, который также нуждается в компиляции.
В этом уроке вы узнаете, как настроить Webpack для того, чтобы он мог компилировать язык разработки Typescript. В результате урока вы напишите сборку, которая сможет одновременно в проекте использовать и Typescript файлы с сохраненным функционалом.