Скринкаст WebPack

Модульный frontend при помощи Webpack

Если вы где-то выкладываете этот скринкаст (торрент и т.п.), то обязательно давайте ссылку на эту страницу, так как все обновления и важные изменения я публикую здесь.

Поддержать:

Ниже вы можете ознакомиться более детально с содержанием скринкаста

Webpack – один из самых мощных и гибких инструментов для сборки frontend.

Вместе с тем, он достаточно сложен, а документация оставляет желать много лучшего.

Поэтому я записал этот скринкаст о том, как его использовать.

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

Полезного просмотра!

Выпуски скринкаста

Этот скринкаст записан по Webpack 1.x. Текущая версия: Webpack 3. Конфиги нуждаются в небольших изменениях, чтобы они работали под Webpack 2.

На текущий момент этот скринкаст не обновлён на 3.x по двум причинам:

Все мои конфиги ещё на 1.x, смысла обновляться нет.
Версия 3 пока ещё менее стабильна, далеко не все плагины обновлены.

Для установки webpack 1.x: npm i webpack@1

В первых частях скринкаста используется модуль babel-loader версии 5, который ставится через "npm i babel-loader@5".

Текущая версия это Babel 6. Чтобы её использовать, поставьте несколько модулей:

          npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-es2015-modules-commonjs
        

Затем замените настройки babel-loader’а в конфиге на "babel?presets[]=es2015".

Часть 1: Введение

Введение

Часть 2: Простая сборка

Часть 3: Несколько скриптов

Часть 4: Продвинутые require

Часть 5: Подключение библиотек

Часть 6: Стили и файлы

Часть 7: Длинное кеширование

Часть 8: Live reload и Hot Module Replacement

Код

Код к большинству выпусков находится в здесь: https://github.com/iliakan/webpack-screencast, его также можно скачать и в виде zip-файла.

Обратите внимание, что зачастую одному выпуску соответствуют несколько этапов эволюции кода. Если вам нужен итоговый вариант, то смотрите последний.