Что такое бандл, модуль и чанк в webpack

Webpack

Несчастье приходит на спину удачи, где удача приходит с неудачей. - Лао-цзы

Введение

bundle,module,chunkВсе они являются терминами в веб-пакете. Ниже приводится введение в их определения и то, как они появились.

Bundle

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

Module

**Модуль** предоставляет дискретные функциональные блоки, площадь которых меньше площади полной программы. Хорошо написанные модули обеспечивают прочные границы абстракции и инкапсуляции, так что каждый модуль в приложении имеет согласованную структуру и четкое назначение.Разрешение модуляМодуль может использоваться как зависимый модуль другого модуля, распознаватель — это библиотека (библиотека), используемая, чтобы помочь абсолютный путь модуля не найден, модуль будет вresolve.modulesПоиск во всех каталогах, указанных в .

Chunk

ChunkЭто специальный термин веб-пакета, используемый внутри для управления процессом сборки. Пакет состоит из фрагментов, которые бывают нескольких типов (например, входной фрагмент (entry chunk) и дочерний фрагмент (child chunk)). Обычно фрагменты будут напрямую соответствовать выходному комплекту, но есть некоторые конфигурации, которые не имеют отношения один к одному. **Разделение кода** – это разделение кода на отдельные пакеты/фрагменты, которые вы можете загружать по требованию, а не загружать пакет, содержащий все. **Конфигурация** Файл конфигурации веб-пакета — это обычный файл JavaScript, который экспортируется как объект. Затем он обрабатывается веб-пакетом в соответствии со свойствами, определенными этим объектом.

Bundle VS Chunk VS Module

Начнем с определения и периода:

  • "модуль"(module)Всем знакомо такое понятие, какCommonJS 模块,AMD,ES6 Modulesмодуль
  • chunkУказывает, что модуль сгенерирован, когда упаковка составлена ​​имbundle
  • Упакованный исходный код

Мы просто создадим тот, который сейчас компилируетсяjsизwebpackконфигурации, шаги следующие:

  1. Создайте пустой файл и откройте его в текущей папкеbash or cmd.
  2. npm init -yгенерироватьpackage.json.
  3. если вы установилиcnpm or yarnпросто выполнитьcnpm i webpack webpack-cli -D, Установитьwebpackупаковка.
  4. Создайтеsrc,существуетsrcСоздано внутриchunk0.js,chunk1.js,common.js,index.js,style.cssи написать внутренний код
  5. Создан в корневом каталоге проектаwebpack.config.js
  6. прямо вcmdвбегаетwebpack

Ниже приведен кодchunk0.js

export default function add(a, b) {
  return a + b;
}

chunk1.js

export default function flow() {
  return "flow";
}

common.js

export default function commonJs() {
  return "commonJs";
}

index.js

import add from "./chunk0.js";
import commonJs from "./common";
console.log(add(1, 2));
console.log(commonJs());

webpack.config.js

module.exports = {
  mode: "production", // 如果不添加就会警告
  entry: {
    index: "./src/index.js", // 一个入口文件
    chunk1: "./src/chunk1.js" // 两一个入口文件
  },
  output: {
    filename: "[name].bundle.js" // 出口文件
  }
};

Эффект от бега следующий

webpack bundle module chunk

Зная из приведенного выше кода,moduleэто код, который не был скомпилирован ранее,webpackгенерируется на основе отношения ссылки на файлchunkфайл, обработанный webpackchunkфайл, генерировать код, который запускается в браузереbundle.

Ссылаться на

Обязательно для собеседования! 5 самых запутанных знаний в webpack

Глубокое понимание упаковки и фрагментации Webpack (Часть 1)

Категории