Скринкаст WebPack

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

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

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

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

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

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

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

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

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

Babel 6

В первых частях скринкаста используется модуль 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-файла.

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

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.