Что такое модуль, кусок и пакет в webpack?

Я не очень хорошо понимаю такие понятия, как модуль, кусок и пакет.

{
  entry: {
    foo: ['webpack/hot/only-dev-server.js',"./src/foo.js"],
    bar: ["./src/bar.js"]
  },
  output: {
    path: "./dist",
    filename: '[name].js'
  }
}

В вышеупомянутой конфигурации only-dev-server.js и foo.js оба куска? Являются ли foo и bar обе связки? Являются ли foo.js и bar.js обоими модулями?

Ответы

Ответ 1

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

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

определения глоссария

Модуль: Отдельные функциональные фрагменты, которые обеспечивают меньшую площадь поверхности, чем полная программа. Хорошо написанные модули обеспечивают надежные абстракции и границы инкапсуляции, которые составляют целостный дизайн и ясную цель.

Чанк: Этот термин, специфичный для веб-пакетов, используется внутри для управления процессом объединения. Связки состоят из кусков, которые бывают нескольких типов (например, входные и дочерние). Как правило, чанки напрямую соответствуют выходным блокам, однако есть некоторые конфигурации, которые не дают отношения один к одному.

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

(акцент добавлен мной)

интерпретация

Я суммирую разницу: блок - это группа модулей в процессе веб-пакета, пакет - это испускаемый фрагмент или набор фрагментов.

Различие полезно, когда речь идет о процессах веб-пакетов по мере их возникновения. Поскольку модули объединяются в группы, они могут значительно измениться (особенно во время обработки плагинов), поэтому в этот момент называть их пакетами не совсем точно, фрагменты могут даже не передаваться как пакеты в конечном выводе! Затем, после того, как веб-пакет завершен, полезно иметь термин для обозначения всех выпущенных конечных файлов (пакетов).

Ваш пример

Так что для вашего примера

{
  entry: {
    foo: ["webpack/hot/only-dev-server.js","./src/foo.js"],
    bar: ["./src/bar.js"]
  },
  output: {
    path: "./dist",
    filename: "[name].js"
  }
}
  • Модули: "webpack/hot/only-dev-server.js", "./src/foo.js", "./src/bar.js" (+ любые другие модули, которые являются зависимостями этих точек входа!)
  • Куски: фу, бар
  • Связки: фу, бар

В вашем примере ваши куски и связки имеют отношение 1:1, но это не всегда так. Например, добавление исходных карт означало бы, что у вас есть отношение 1: 2 между порцией и пакетом.

Ресурсы

Ответ 2

A bundle - это некоторый связанный код, упакованный в один файл.

Если вы не хотите, чтобы весь ваш код был помещен в один огромный пакет, вы разделите его на несколько пакетов, которые называются куски в терминологии webpack. В некоторых случаях вы определяете, как ваш код разделяет куски самостоятельно (с entry, который указывает на несколько файлов и шаблон выходного файла, например [name].[chunkhash].js), в других случаях webpack сделает это за вас (например, с помощью CommonsChunkPlugin).

A модуль - это JS-модуль (например, CommonJS или модуль ES6). Поскольку внутренне webpack имеет дело только с модулями, все активы, отличные от js, также объединены в модули. Поэтому, если у вас есть несколько файлов .sass, вы будете import/require их в JS файлах для их вложения, но если вы используете ExtractTextWebpackPlugin, он выведет отдельный набор CSS для этих файлов.

Ответ 3

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

Чанк - это код, который отделится от основного пакета, который является main.js, и сформирует свой собственный файл, известный как файл чанка. Есть два типа кусков, а именно. синхронизация и асинхронность. Синхронные блоки загружаются синхронно с main.js, и вы увидите элемент в исходном коде. Асинхронные чанки загружаются по требованию (ленивые загружаются), и вы увидите сетевой запрос на асинхронные чанки в инструменте разработчика. Эти куски выделены из main.js в зависимости от некоторых условий, и мы должны сообщить об этом в Webpack. Это делается с помощью плагина Webpack, известного как splitChunksPlugin.

Подробнее здесь: https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312