Скоро ожидается релиз webpack 2, в котором будет много новых фич, таких как нативная поддержка es6 модулей import/export, динамическая подгрузка данных, tree shaking и др.
Недавно я нашел время чтобы обновить свой проект с webpack 1 на webpack 2, и хочу описать шаги, которые нужно сделать для перехода.
Установка webpack 2:
Во-первых мы устанавливаем последнюю версию wepback. Поскольку пока он не является стабильным, вы можете выбрать любую beta. На момент написания статьи это 2.1.0-beta.27.
|
1 |
npm install --save-dev webpack@2.1.0-beta.27 |
Что нужно поменять:
module.loaders => module.rules
Просто переименовываем loaders в rules. Это изменение не является критическим, loaders так же пока поддерживаются, но в будущем они уйдут в deprecated .
|
1 2 3 4 5 6 7 8 9 |
// before modules: { loaders: {...} } // after modules: { rules: {...} } |
resolve.modulesDirectories => resolve.modules
Ещё одна секция меняет название.
|
1 2 3 4 5 6 7 8 9 |
// before resolve: { modulesDirectories: [...], } // after resolve: { modules: [...], } |
Отключаем в babel компиляцию модулей в CommonJS
Webpack 1 не поддерживал es6 модули, и babel конвертировал их в CommonJs modules. Webpack 2 может сам разбирать es6 модули, и это позволяет убрать из сборки код модулей которые не используются. Это называется tree shaking. Поэтому рекомендуется принудительно отключить в babel компиляцию модулей в CommonJS. Для это добавляется параметр:
|
1 2 3 4 5 6 7 |
// before "presets": ["es2015"] // after "presets": [ ["es2015", { "modules": false }] ] |
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 в виде строки, в которую при желании можно было еще передавать параметры:
|
1 2 3 4 5 |
// Webpack 1 ExtractTextPlugin.extract( 'style-loader', 'css-loader?modules-true!postcss-loader!sass-loader' ); |
Теперь по другому, новый webpack 2 позволяет создать массив объектов описывающих loaders, и указать его в плагине:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Webpack 2 var loaders = [ { loader: 'css-loader', options: { modules: true } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: loaders, }) |
При этом, если ранее использовался ключ query, то теперь используется options.
module.preLoaders и module.postLoaders
Были удалены.
Итог:
Webpack 2 обеспечивает более высокую производительность, оптимизирует сборку и имеет более удобный конфиг. Несмотря на то, что он находится еще в beta, сборка работает стабильно, и я бы рекомендовал найти время чтобы переводить свои проекты на новый wepback уже сейчас.