Webpack 4 (кодовое имя Legato) был выпущен две недели назад. И он упакован множеством блестящих функций. В отличие от Webpack 3, который не был серьезным обновлением своего предшественника, Webpack 4 имеет ряд интересных функций.

Основные изменения, на которые стоит обратить внимание -

1. Уменьшение времени сборки
Время сборки значительно сократилось (более 60%)

2. Отсутствие конфигурации
Теперь вы можете начать использовать webpack с любым проектом без какого-либо файла конфигурации (введение режима)

Недавно я обновил свой React-Redux Boilerplate до Webpack 4. Пока нет четких документов для миграции, поэтому мне потребовалось довольно много времени и усилий, чтобы завершить обновление. Я записываю все, что придумал, чтобы это могло помочь любому, кто хочет обновиться.

Ниже приведены изменения конфигурации, которые необходимо сделать.

  • Режим
  • Плагины
  • Зависимости

Режим

Webpack 4 имеет два режима - разработка и продакшн.

Ранее мы передавали флаг -p команде webpack для запуска производственной сборки. В Webpack 4 вы всегда должны передавать mode параметр. У вас есть два способа перейти в режим:

1. Выполните скрипт npm

В вашем package.json -

"build": "webpack --config config/webpack.dev.config.js --mode development",
"build:prod": "webpack --config config/webpack.prod.config.js --mode production"

2. Пройдите через конфигурационный файл.

В вашем webpack.dev.config.js

mode: 'development'

В вашем webpack.prod.config.js

mode: 'production'

Плагины

Следующие плагины были удалены из Webpack 4, которые широко использовались в предыдущих версиях.

  • NoEmitOnErrorsPlugin
  • ModuleConcatenationPlugin
  • NamedModulesPlugin
  • CommonsChunkPlugin

Теперь вместо этого конфигурация этих плагинов должна идти внутри ключа optimization в config file с соответствующими параметрами.

Этот фрагмент может дать вам дополнительную информацию

plugins: [
  // Not used like this anymore 
  new webpack.NamedModulesPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
      children: true,
      minChunks: 2,
      async: true, 
    }),
  new webpack.optimize.ModuleConcatenationPlugin()
],
Instead, the above plugins are used like this
optimization: {
  
  namedModules: true, // NamedModulesPlugin()
  splitChunks: { // CommonsChunkPlugin()
    name: 'vendor',
    minChunks: 2
  },
  noEmitOnErrors: true, // NoEmitOnErrorsPlugin
  concatenateModules: true //ModuleConcatenationPlugin
}

Зависимости

Если вы используете такие зависимости, как webpack-hot-middleware и image-webpack-loader, не забудьте обновить и их. У меня возникла странная проблема с webpack-hot-middleware, но как только я обновил ее до последней версии, она решилась автоматически.

Вы можете сослаться на этот коммит в React-Redux Boilerplate для справки.

Webpack 4 хорош во многих отношениях. А вот отсутствие документации на апгрейд - облом. Но все мы прекрасно умеем решать проблемы, так что мы не против.

Если вы планируете перейти на Webpack 4, не думайте дважды, ваш опыт разработки определенно будет многогранным. Боже скорости!

Хорошего дня! ✨

Первоначально опубликовано на dev.to.

✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .