Скринкаст WebPack

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

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

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

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

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

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

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

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

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

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

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

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

npm i babel-loader babel-core babel-preset-env

Затем замените настройки babel-loader’а в конфиге на такие (для адаптации под браузеры с долей более 3%):

          {
  loader: 'babel-loader',
  options: {
    presets: [
      ['env', {
        targets: {
          browsers: "> 3%" // можно и указать конкретные браузеры
        }
      }]
    ]
  }
}
        

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

Введение

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

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

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

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

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

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

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

Код

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

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