Курс по Webpack. Основы.

Данный курс предназначен почти для всех, кто занимается веб технологиями. Вы познакомитесь с основами такого мощного инструмента как webpack, а точнее с его новой версией webpack 2.

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

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

В результате курса вы сможете легко работать с webpack, будете знать как сильно вы можете оптимизировать ваш процесс разработки с ним, начиная от скорости разработки, заканчивая сильным ускорением вашего приложения. И вы сможете писать любые задачи webpack, от оптимизации JavaScript до компилирования препроцессоров с сервером автоматической перезагрузки окна браузера.

Урок 0. Курс по Webpack. Основы

Урок 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 есть исходные карты, о которых и пойдет речь в этом уроке.

Из урока вы узнаете, как с помощью webpack config задать исходные карты, для более удобного дебаггинга исходного кода.

В результате урока мы разберем 2 типа встроенных типов исходных карт: eval и source-map и посмотрим, чем они отличаются.

Урок 7. Webpack. Исходные карты

От автора: webpack – это очень мощный инструмент, который поддерживает нативно большое количество возможностей. Однако есть возможность расширить его функциональность плагинами.

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

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

Урок 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 стилей.

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

Ваш адрес email не будет опубликован.