Релиз Webpack 4: новые функции и свойства

Webpack – это сборщик статических модулей для современных приложений JavaScript. Он помогает объединить все различные модули и собрать их в один или несколько пакетов.

Недавно вышел релиз Webpack 4, предлагающий новые функции и улучшения, о чем мы и поговорим в этой статье.

Чтобы начать работу с webpack 4, установите его в свой проект с помощью npm:

npm install webpack webpack-cli --save-dev

Это также можно сделать с помощью Yarn:

yarn add webpack webpack-cli --dev

Поддержка Node.js

Webpack 4 отказывается от поддержки Node.js 4. Это решение было принято, чтобы использовать преимущества современного синтаксиса ES6, который обеспечивает более чистую и стабильную кодовую базу.

Важно отметить, что проекты, использующие более старые версии Webpack, могут снизить производительность, поскольку теперь используется современный синтаксис JavaScript.

Скорость сборки

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

На следующих изображениях показано время сборки проекта в Webpack 3 и Webpack 4 соответственно:

Webpack 3 собирает проект за 1350 миллисекунд. Webpack 4 соберет его за 865 миллисекунд:

Свойство mode

Webpack 4 поставляется со свойством mode, которое позволяет вам указать, в какой среде вы работаете: development или production. Каждый вариант имеет свои преимущества и случаи использования.

Режим разработки позволяет сосредоточиться на создании программы, предоставляя специальный набор функций, а именно:

  • Инструменты для отладки браузера.
  • Включенные комментарии, подробные сообщения об ошибках и подсказки для разработки.
  • Быстрые и оптимизированные инкрементальные пересборки.

Режим production предлагает вам среду, по умолчанию подготовленную для развертывания вашего проекта, что включает:

  • Возможность создания оптимизированных пакетов.
  • Объединение модулей (Scope Hoisting).
  • Меньший выходной размер пакетов.
  • Исключение «development-only» кода.

Если вы не выберете режим, webpack будет выдавать ошибку.

Настроить режим можно в файле webpack.config.js:

module.exports = {
                mode: 'development'
}

Если вы хотите включить режим производства:

module.exports = {
                mode: 'production'
}

Кроме development и production, свойство mode также принимает значение none – оно позволяет отключить все режимы и в то же время устранить ошибку, выдаваемую Wepback.

Плагины и улучшения

В Webpack 4 плагин CommonsChunkPlugin был удален и заменен стандартным набором значений и API, которые называются optimization.splitChunks и optimization.runtimeChunk. Это означает, что теперь вы можете автоматически генерировать общие фрагменты кода. Некоторые другие плагины также устарели и не поддерживаются в версии 4.

  • NoEmitOnErrorsPlugin объявлен устаревшим и теперь называется optimization.noEmitOnErrors. Он включен по умолчанию в режиме производства.
  • ModuleConcatenationPlugin объявлен устаревшим и теперь называется optimization.concatenateModules. Он включен по умолчанию в режиме производства.
  • NamedModulesPlugin устарел и теперь называется optimization.namedModules. Он включен по умолчанию в режиме производства.

Стремясь повысить производительность и получить наилучшую оптимизацию, webpack 4 по умолчанию включает кэширование UglifyJs.

Новые типы модулей

Кроме того, Webpack поддерживает новые типы модулей:

  • javascript/auto: (default в webpack 3) модуль Javascript со всеми включенными модульными системами: CommonJS, AMD, ESM.
  • javascript/esm: включает модули EcmaScript, при этом все остальные модульные системы недоступны.
  • javascript/dynamic: недоступны только модули CommonJS и EcmaScript.
  • json: данные JSON доступны через require и import
  • webassembly/experimental: модули WebAssembly (в настоящее время находятся в бета-версии)

javascript/auto был модулем по умолчанию в Webpack 3, но Webpack 4 полностью абстрагировал специфику JavaScript от кодовой базы, чтобы пользователи могли указать тип модуля, который они хотят.

Также Webpack ищет расширения .wasm, .mjs, .js и .json именно в таком порядке.

0CJS

0CJS – это Zero Config приложения. Идея подобных приложений JavaScript заключается в том, что для их запуска требуется минимальная или нулевая конфигурация. Вам не нужен файл конфигурации, чтобы начать создавать приложение. Это основа относительно нового сборщика Parcel.

Читайте также: Сборка веб-приложения с помощью Parcel

В версии Webpack 4 больше не требуется файл webpack.config.js.

Все, что вам нужно сделать, это иметь файл ./src/index.js. Всякий раз, когда вы запускаете команду webpack в терминале, Webpack использует этот файл в качестве точки входа приложения. Это удобно в разработке небольших проектов.

Другие обновления

  • Мертвые ветки теперь автоматически удаляются самим Webpack. Ранее это делал Uglify, но теперь за удаление мертвого кода отвечает Webpack.
  • import() теперь поддерживает webpackInclude и webpackExclude в качестве «магических комментариев». Это позволяет фильтровать файлы при использовании динамических выражений.
  • Если в коде используется System.import(), теперь Webpack выводит предупреждение. Рекомендуется использовать import().
  • UglifyJ по умолчанию кэширует и работает параллельно.
  • теги script больше не используют text/javascript и async, так как это значения по умолчанию. Это экономит несколько байтов.

Заключение

Это лишь основные обновления в webpack 4. Вот еще несколько новых функций, о которых мы не успели здесь поговорить:

  • Модули HTML/CSS позволяют использовать файлы HTML/CSS в качестве точки входа.
  • Постоянное кэширование.
  • Многопоточность и многоядерность.
  • Стабильная поддержка WebAssembly (ранее была в бета-версии).

Вы можете ознакомиться с полным списком обновлений webpack 4 здесь.

Tags: , , ,

Добавить комментарий