01
Введение

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