Скринкаст по 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: Введение

Введение