Скринкаст по Webpack

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

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

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

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

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

Скринкаст по Webpack 1.x

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

Babel 7

В первых частях скринкаста используется модуль 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: Введение
01
Введение
5:14
Часть 2: Простая сборка
01
Простой конфиг
3:43
02
Внешний доступ к модулям
1:28
03
Пересборка при изменениях
1:41
04
Source maps
6:20
05
Окружение, NODE_ENV
7:26
06
Babel.JS
7:21
07
Resolving
3:54
08
Минификация
2:27
Часть 3: Несколько скриптов
01
Несколько точек входа
7:01
02
NoErrorsPlugin
2:06
03
CommonsChunkPlugin
1:53
04
Информация о сборке
3:40
05
Настройки CommonsChunkPlugin
3:44
06
Общий код в common.js
3:25
07
Мульти-компиляция
3:28
Часть 4: Продвинутые require
01
Динамический require
5:41
02
Объединение фрагментов
2:38
03
require(выражение)
5:35
04
require.context
4:15
05
Динамический require.context
9:08
06
ContextReplacementPlugin
7:09
07
IgnorePlugin
6:23
Часть 5: Подключение библиотек
01
CDN и сборка: externals
3:00
02
Локально: ProvidePlugin
3:01
03
Оптимизация: noParse, include
9:24
04
Старые скрипты: пути и imports/exports
5:27
05
expose и script-loader
2:31
Часть 6: Стили и файлы
01
Компонент "меню", style-loader
7:49
02
CSS и file-loader
9:27
03
url-loader
2:16
04
jade-loader
0:49
05
less, sass, stylus
5:42
06
ExtractTextPlugin
9:32
Часть 7: Длинное кеширование
01
Повторение: пример конфига
6:07
02
Настройки для кеширования
11:52
Часть 8: Live reload и Hot Module Replacement
01
Webpack Dev Server
4:51
02
Продвинутая настройка WDS
10:13
03
Live Reload
10:00
04
Hot Module Replacement
15:51