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 здесь.