Оригинальный адрес:🚀webpack 4 beta — попробуйте сегодня!🚀

Оригинальный автор:Sean T. Larkin

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:FateZeros

Корректор:kangkai124 MechanicianW

🚀webpack 4 Beta —— А теперь давайте заглянем! 🚀

Для поддержки миллионов функций, вариантов использования и требований ему требуется безопасная, стабильная, надежная и расширяемая основа. Только вебпак имеет бесконечные возможности.

Стабильная дорога релиза!

С начала августа - когда мы**webpack/webpack#master**разделены в**next**При ветвлении - мы увидели удивительный приток вкладов.

можно использоватьgitinspectorКраткий обзор веб-пакетаnextСтатистика вклада Git по веткам. Вы можете попробовать его на своем проекте и внимательно изучить.PS: это не считая нашей команды webpack-cli и организации webpack-contrib, которые проделали большую работу по поддержке загрузчиков и плагинов.

🎉 Сегодня мы с гордостью делимся плодами этой работы, выпуская webpack 4.0.0 - beta.0! 🎉

🎁Выполненное обещание — Предсказуемый цикл выпуска

Когда мы закончили выпуск webpack 3, мы заверили сообщество, что для основных изменений версии потребуется более длительный цикл разработки.

Мы выполнили это обещание [и продолжаем выполнять], предоставив вам целый ряд функций, улучшений и исправлений ошибок, и мы не можем дождаться, когда вы запачкаете руки! Давайте начнем!

🤷‍Как установить [v4.0.0-beta.0]

если вы используетеyarn:

yarn add webpack@next webpack-cli --dev

илиnpm:

npm install webpack@next webpack-cli --save-dev

🛠Как мигрировать?

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

поэтому нам нужно, чтобы вы увиделиОфициальный журнал изменений а такжеНаш проект миграцииИ оставляйте отзывы о том, чего нам не хватает! Это поможет нашей команде документации создать официальное руководство по переходу на стабильную версию!

Что нового в вебпаке 4?

Вот некоторые из наиболее примечательных функций, которые вам понравятся. Для обновлений, функций и внутренних модификаций APIполный список,Смотрите наш журнал изменений

🚀 Лучшая производительность

Производительность будет значительно повышена в нескольких сценариях в webpack 4. Вот некоторые заметные изменения, которые мы внесли, чтобы это произошло:

По умолчанию с помощьюproductionВ режиме мы используем UglifyJS для автоматической компиляции и параллельного кэширования, чтобы уменьшить рабочую нагрузку.
Мы выпустили новую версиюСистема плагиновчтобы перехватчики событий и обработчики событий были мономорфными.
Кроме того, webpack прекратил поддержку Node v4, что позволило нам добавить массу нового синтаксиса и структур данных ES6, которые также оптимизированы для V8.На сегодняшний день мы получили сообщения от некоторых пользователей о том, чтоВремя сборки уменьшено с 9 часов до 12 минут.!

PS: Мы не полностью реализовали кеширование и распараллеливание 😉 Это [веха webpack 5].

🔥Лучшая конфигурация по умолчанию —— Нулевая конфигурация

До сегодняшнего дня веб-пакет всегда требовал, чтобы вы явно устанавливалиentryа такжеoutputАтрибуты. Для веб-пакета 4 веб-пакет автоматически примет вашentryсобственность./src, и упаковка по умолчанию будет выводиться в./distсередина.

это означаетВам больше не нужен конфиг, чтобы начать использовать webpack!

webpack 4.0.0-beta.0 запускает версию без конфигурации

Теперь, когда webpack представляет собой готовый сборщик с нулевой конфигурацией, мы4.xа также5.0Заложите основу для расширения функциональности по умолчанию в будущем.

💪Улучшенный режим по умолчанию —— режим

Теперь вы должны выбрать один из двух режимов (modeили--mode):productionилиdevelopment

Режим производства может дать вам различные оптимизации. Это включает в себя минимизацию кода, повышение области действия, удаление модулей без ссылок, сокращение модулей без побочных эффектов, а также введение таких вещей, какNoEmitOnErrorsPluginЭто требует от вас ручного использования плагина.
Режим разработки оптимизирует скорость разработки и опыт разработки. Кроме того, мы автоматически включаем такие функции, как имена путей, eval-source-maps, в выходные данные вашего пакета для облегчения чтения кода и быстрой сборки!

🍰Настройки побочных эффектов - Огромный выигрыш в размере пакета

Мы представили в package.jsonsideEffects: falseслужба поддержки. Когда это поле добавляется, оно сигнализирует веб-пакету, что используемая библиотека не имеет побочных эффектов. Это означает, что webpack может безопасно удалить любые дублирующиеся экспортированные модули, используемые в вашем коде.

Например, изlodash-esимпортировать отдельноexportБудет стоить ~ 223 КиБ [сжатый].В веб-пакете 4 это теперь стоит всего ~ 3 КиБ!

🌳Поддержка JSON и Tree Shaking

Когда вы используете синтаксис ESModuleimportКогда JSON, webpack удалит неиспользуемый экспорт в «Модуле JSON». Для приложений, которые импортировали в свой код много неиспользуемых модулей JSON, вы увидитеОбъем вашей упаковки значительно уменьшается.

😍Обновите до UglifyJS2

Это означает, что вы можете использовать синтаксис ES6, сжимать его без использования конвертера.

Мы хотели бы поблагодарить команду разработчиков UglifyJs2 за их самоотверженную и усердную работу по поддержке ES6. Это непростая задача, мы хотели бы посетитьваш репозиторий кода, чтобы выразить нашу благодарность и поддержку.

UglifyJS2 теперь поддерживает синтаксис JavaScript ES6!

🐐 Знакомство с типом модуля + поддержка .mjs

Исторически JavaScript был единственным в первом классном типе модуля в WebPack. Это заставляет много неловко боли для пользователей, которые не могут эффективно упаковать CSS / HTML. Мы полностью абстрагировали функции JavaScript из нашей кодовой базы, чтобы обеспечить этот новый API. В настоящее время в настоящее время у нас есть 5 типов модулей, реализованных для введения:

javascript/auto: (существуетwebpack 3Включено по умолчанию) Включены все модульные системы Javascript: CommonJS, AMD, ESM
javascript/esm: модули EcmaScript, все остальные модульные системы недоступны (файлы .mjs по умолчанию)
javascript/dynamic: недоступны только модули CommonJS и EcmaScript.
json: данные JSON, которые можно импортировать и использовать с помощью запроса и импорта (файл .json по умолчанию).
webassembly/experimental: модуль WebAssembly (в настоящее время экспериментальный и используется по умолчанию для файлов .wasm)
Кроме того, webpack теперь поддерживает поиск.wasm, .mjs, .jsа также.jsonРазверните файл для анализа

** Самое интересное в этой функции то, что мы можем продолжать использовать модульную модель CSS и HTML (4.x). ** Это позволит использовать такие функции, как HTML, в качестве точки входа!

🔬 Поддержка WebAssembly

Webpack теперь поддерживает по умолчанию любой родной модуль WebAssembly.importа такжеexport. Это означает, что вы также можете написать загрузчики, которые позволят вам напрямуюimportRust, C++, C и другие языки WebAssembly:

💀Удалить CommonsChunkPlugin

мы также удалилиCommonsChunkPlugin, и многие его функции включены по умолчанию. Кроме того, для пользователей, которым необходим детальный контроль над стратегией кэширования, мы добавилиoptimization.splitChunksа такжеoptimization.runtimeChunk У них более богатые и гибкие функции

💖 И многое другое!

Есть еще много функцийМы настоятельно рекомендуем вам нашуОфициальный список измененийПосмотреть все включено.

⌚ Обратный отсчет с этого момента

Как и было обещано, мы подождем месяц, прежде чем выпустить стабильную версию webpack 4.Это дает нашим плагинам, загрузчикам и интеграционной экосистеме время для тестирования, составления отчетов и обновления до webpack 4.0.0!

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

Большое спасибо всем участникам, которые помогли нам сделать webpack 4. Как мы уже говорили, достижения wepack — это совместные усилия всех нас и экосистемы.

Нет времени помочь внести свой вклад? Хотите отплатить другими способами? пройти черезПожертвуйте нашему открытому коллективуСтаньте сторонником или спонсором webpack. Открытый коллектив помогает поддерживать не только основную команду, но и участников, которые тратят много своего свободного времени на улучшение организации! ❤

благодарныйFlorent Cailhol, Tobias Koppers, а такжеJohn Reilly.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.