Что такое выход

Что такое вывод — Webpack 5

Как работают выходные данные и как они используются в webpack.

Прежде чем продолжить статью, перейдите по ссылкам ниже, если вы пропустили предыдущие статьи

Что такое вывод

Выходные данные — это свойство, которое указывает веб-пакету, где выдавать/сохранять пакеты, которые он создает, и как называть эти файлы пакетов. По умолчанию основной выходной файл сохраняется в ./dist/main.js, а другие сгенерированные файлы хранятся в ./dist.

module.exports = {
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

Одна или несколько основных точек входа

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

Пример:

module.exports = {
 mode: "development",
 entry: "./src/home.js"
}

Вывод:

dist /
 - main.js

Примечание.

Конфигурация веб-пакета по умолчанию для выходного свойства выглядит примерно так:

module.exports = {
 mode: "development",
 entry: "./src/home.js"
 // default output configuration
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

[name] преобразуется в динамическое имя пакета. Здесь он разрешается в main.js.

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

Точки входа в объект

Хотя webpack может иметь несколько разных точек входа, можно указать только одну конфигурацию вывода.

Пример:

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },  
 // default output configuration 
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js
 }
}

Вывод:

dist /
 - adminApp.js
 - homeApp.js

Передовой

Помимо подсвойств пути и имени файла свойства Output. Есть несколько других подсвойств, которые часто используются в процессе сборки (например, CRA и т. д.). Некоторые из них перечислены ниже.

Информация о пути

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js, 
  pathInfo: true
 }
}

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

Имя файла фрагмента

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js, 
  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js
 }
}

contenthash:8 генерирует динамическое хеш-значение на основе содержимого файлов, а «:8» представляет длину хэш-значения. Если содержимое файлов не изменилось, то генерируется такое же значение хеш-функции.

chunkFilename определяет имя неначальных файлов фрагментов (таких как лениво загруженные или динамически импортированные модули). Эти имена файлов должны быть сгенерированы во время выполнения, чтобы отправить запрос на получение фрагментов.

Из-за этого заполнители, такие как [name] и [contenthash], необходимо добавить сопоставление идентификатора фрагмента ([id]) со значением заполнителя ([name].[contenthash:8].chunk.js) в выходной пакет со средой выполнения веб-пакета. Это увеличивает размер и может сделать пакет недействительным при изменении значения заполнителя для любого фрагмента.

Общий путь

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js, 
  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/' 
 }
}

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

Этот параметр указывает общедоступный URL-адрес выходного каталога при обращении к нему в браузере. Относительный URL разрешается относительно HTML-страницы (или тега <base>). URL-адреса относительно сервера, URL-адреса относительно протокола или абсолютные URL-адреса также возможны и иногда необходимы, например, при размещении ресурсов в CDN.

В приведенном выше фрагменте кода запрос к файлу чанка будет выглядеть примерно так https://server.com/assets/1.a345ersd.chunk.js

Сервер webpack-dev также получает подсказку от publicPath, используя ее, чтобы определить, откуда обслуживать выходные файлы.

По умолчанию значение publicPath установлено в «/».

ГлобалОбъект

module.exports = {
 mode: "development",
 entry: {
  adminApp: "./src/admin.js",
  homeApp: "./src/home.js"
 },
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: [name].js, 
  pathInfo: true, 
  chunkFilename: [id].[contenthash:8].chunk.js, 
  publicPath: 'https://server.com/assets/',
  globalObject: 'this' 
 }
}

При нацеливании на библиотеку, особенно когда libraryTarget равно 'umd', этот параметр указывает, какой глобальный объект будет использоваться для монтирования библиотеки.

Чтобы сборка UMD была доступна как в браузерах, так и в Node.js, установите для параметра globalObject значение 'this'.

По умолчанию self / window для веб-целей.

Файл конфигурации веб-пакета специально для выделения свойства вывода:

Ссылка на репозиторий GitHub

https://github.com/yadhus/What-is-Output-Webpack-5

использованная литература

https://webpack.js.org/configuration/output/
https://webpack.js.org/concepts/#output

Что такое выход — Webpack 5