Миграция на Webpack 2

Скоро ожидается релиз webpack 2, в котором будет много новых фич, таких как нативная поддержка es6 модулей import/export, динамическая подгрузка данных, tree shaking и др.

Недавно я нашел время чтобы обновить свой проект с webpack 1 на webpack 2, и хочу описать шаги, которые нужно сделать для перехода.

Установка webpack 2:

Во-первых мы устанавливаем последнюю версию wepback. Поскольку пока он не является стабильным, вы можете выбрать любую beta. На момент написания статьи это 2.1.0-beta.27.

Что нужно поменять:

module.loaders => module.rules

Просто переименовываем loaders в rules. Это изменение не является критическим, loaders так же пока поддерживаются, но в будущем они уйдут в deprecated .

resolve.modulesDirectories => resolve.modules

Ещё одна секция меняет название.

Отключаем в babel компиляцию модулей в CommonJS

Webpack 1 не поддерживал es6 модули, и babel конвертировал их в CommonJs modules. Webpack 2 может сам разбирать es6 модули, и это позволяет убрать из сборки код модулей которые не используются. Это называется tree shaking. Поэтому рекомендуется принудительно отключить в babel компиляцию модулей в CommonJS. Для это добавляется параметр:

OccurrenceOrderPlugin

Теперь включен по дефолту.

Теперь нет необходимости включать его в конфигурацию, и можем удалить лишние строки из конфига.

Автоматический префикс -loader был удален

Невозможно теперь опускать -loader расширения при ссылках на загрузчики. Если раньше чтобы воспользоваться например css-loader можно было просто обратиться к нему как css, и префикс выставлялся автоматом, то теперь нужно везде полностью прописывать css-loader.

UglifyJsPlugin  sourceMap

Опция sourceMap из UglifyJsPlugin теперь по умолчанию false вместо true. Это позволяет ускорить сборку приложения с помощью webpack. Однако, если вы  используете source maps для минифицированного кода, вам необходимо установить sourceMap: true для UglifyJsPlugin.

ExtractTextWebpackPlugin

ExtractTextWebpackPlugin не работает с webpack 2. Вам нужно установить ExtractTextPlugin v2 — https://github.com/webpack/extract-text-webpack-plugin.

Новая версия также несёт некоторые синтаксические изменения в конфигурации. В первой версии, для использования нескольких loaders, их необходимо было передавать в ExtractTextPlugin  в виде строки, в которую при желании можно было еще передавать параметры:

Теперь по другому, новый webpack 2 позволяет создать массив объектов описывающих loaders, и указать его в плагине:

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

module.preLoaders и module.postLoaders

Были удалены.

Итог:

Webpack 2 обеспечивает более высокую производительность, оптимизирует сборку и имеет более удобный конфиг. Несмотря на то, что он находится еще в beta, сборка работает стабильно, и я бы рекомендовал найти время чтобы переводить свои проекты на новый wepback уже сейчас.

Также можно почитать: