Какой тип ассета нужно указать для изображения

Asset Modules

Asset Modules — это тип модуля, который позволяет использовать файлы активов (шрифты, значки и т. д.) без настройки дополнительных загрузчиков.

До webpack 5 обычно использовались:

• raw-loader для импорта файла в виде строки
• url-loader для встраивания файла в пакет в качестве данных URI
• file-loader для отправки файла в выходной каталог

Тип Asset Modules заменяет все эти загрузчики, добавляя 4 новых типа модулей:

• asset/resource создает отдельный файл и экспортирует URL.. Ранее это было возможно с помощью file-loader .
• asset/inline экспортирует данные URI актива. Раньше это было возможно с помощью url-loader .
• asset/source экспортирует исходный код актива. Раньше это было возможно с помощью raw-loader .
• asset автоматически выбирает между экспортом данных URI и созданием отдельного файла. Раньше это было возможно при использовании url-loader с ограничением размера активов.

При использовании старых загрузчиков ресурсов (i.e. ( file-loader / url-loader / raw-loader ) вместе с модулем ресурсов в webpack 5 вы можете запретить модулю ресурсов снова обрабатывать ваши ресурсы, так как это приведет к дублированию ресурсов. Это можно сделать, установив тип модуля актива на ‘javascript/auto’ .

webpack.config.js

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, > >, ], + type: 'javascript/auto' >, ] >, >

Чтобы исключить активы, полученные от новых вызовов URL, из загрузчиков активов, добавьте dependency: < not: ['url'] >в конфигурацию загрузчика.

webpack.config.js

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, + dependency: < not: ['url'] >, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], > >

Resource assets

webpack.config.js

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist') >, + module: < + rules: [ + < + test: /\.png/, + type: 'asset/resource' + > + ] + >, >;

src/index.js

import mainImage from './images/main.png'; img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'

Все файлы .png будут выброшены в выходной каталог, а их пути будут внедрены в бандлы, кроме того, для них можно настроить outputPath и publicPath .

Пользовательское имя выходного файла

По умолчанию модули asset/resource выдают файл с именем [hash][ext][query] в выходной каталог.

Вы можете изменить этот шаблон, установив output.assetModuleFilename в конфигурации webpack:

webpack.config.js

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist'), + assetModuleFilename: 'images/[hash][ext][query]' >, module: < rules: [ < test: /\.png/, type: 'asset/resource' > ] >, >;

Другой случай настройки имени выходного файла — это отправка некоторых ресурсов в указанный каталог:

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist'), + assetModuleFilename: 'images/[hash][ext][query]' >, module: < rules: [ < test: /\.png/, type: 'asset/resource' - > + >, + < + test: /\.html/, + type: 'asset/resource', + generator: < + filename: 'static/[hash][ext][query]' + > + > ] >, >;

При такой конфигурации все файлы html будут помещены в каталог static внутри выходного каталога.

Rule.generator.filename аналогичен output.assetModuleFilename и работает только с модулями типов asset и asset/resource .

Inlining assets

webpack.config.js

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist'), - assetModuleFilename: 'images/[hash][ext][query]' >, module: < rules: [ < - test: /\.png/, - type: 'asset/resource' + test: /\.svg/, + type: 'asset/inline' - >, + > - < - test: /\.html/, - type: 'asset/resource', - generator: < - filename: 'static/[hash][ext][query]' - > - > ] > >;

src/index.js

- import mainImage from './images/main.png'; + import metroMap from './images/metro.svg'; - img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png' + block.style.background = `url($ )`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo. vc3ZnPgo=)

Все файлы .svg будут добавлены в пакеты как данные URI..

Генератор пользовательских данных URI

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

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

webpack.config.js

const path = require('path'); + const svgToMiniDataURI = require('mini-svg-data-uri'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module: < rules: [ < test: /\.svg/, type: 'asset/inline', + generator: < + dataUrl: content =>< + content = content.toString(); + return svgToMiniDataURI(content); + > + > > ] >, >;

Теперь все файлы .svg будут кодироваться пакетом mini-svg-data-uri .

Source assets

webpack.config.js

const path = require('path'); - const svgToMiniDataURI = require('mini-svg-data-uri'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module: < rules: [ < - test: /\.svg/, - type: 'asset/inline', - generator: < - dataUrl: content => < - content = content.toString(); - return svgToMiniDataURI(content); - > - > + test: /\.txt/, + type: 'asset/source', > ] >, >;

src/example.txt

Hello world

src/index.js

- import metroMap from './images/metro.svg'; + import exampleText from './example.txt'; - block.style.background = `url($ ); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo. vc3ZnPgo=) + block.textContent = exampleText; // 'Hello world'

Все файлы .txt будут добавлены в пакеты как есть.

URL assets

При использовании new URL(‘./path/to/asset’, import.meta.url) webpack также создает модуль ресурсов.

src/index.js

const logo = new URL('./logo.svg', import.meta.url);

В зависимости от target в вашей конфигурации, webpack скомпилирует приведенный выше код в другой результат:

// цель: сеть new URL( __webpack_public_path__ + 'logo.svg', document.baseURI || self.location.href ); // цель: вебворкер new URL(__webpack_public_path__ + 'logo.svg', self.location); // цель: узел, узел-вебкит, nwjs, электронный-основной, электронный-рендерер, электронный-предварительная загрузка, асинхронный-узел new URL( __webpack_public_path__ + 'logo.svg', require('url').pathToFileUrl(__filename) );

Начиная с webpack 5.38.0, Data URLs также поддерживаются в new URL() :

src/index.js

const url = new URL('data:,', import.meta.url); console.log(url.href === 'data:,'); console.log(url.protocol === 'data:'); console.log(url.pathname === ',');

Общий тип актива

webpack.config.js

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module: < rules: [ < + test: /\.txt/, + type: 'asset', > ] >, >;

Теперь webpack будет автоматически выбирать между resource и inline , следуя условию по умолчанию: файл размером менее 8 КБ будет рассматриваться как тип модуля inline , а в противном случае — тип модуля resource .

Вы можете изменить это условие, установив параметр Rule.parser.dataUrlCondition.maxSize на уровне правила модуля в конфигурации webpack:

webpack.config.js

const path = require('path'); module.exports = < entry: './src/index.js', output: < filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module: < rules: [ < test: /\.txt/, type: 'asset', + parser: < + dataUrlCondition: < + maxSize: 4 * 1024 // 4kb + > + > > ] >, >;

Также вы можете specify a function решить, встраивать модуль или нет.

Замена синтаксиса встроенного загрузчика

До Asset Modules и Webpack 5 можно было использовать inline syntax с упомянутыми выше устаревшими загрузчиками.

Теперь рекомендуется удалить весь синтаксис встроенного загрузчика и использовать условие resourceQuery для имитации функциональности встроенного синтаксиса.

Например, в случае замены Т14153Т на тип В25387В:

- import myModule from 'raw-loader!my-module'; + import myModule from 'my-module?raw';

и в конфигурации webpack:

module: < rules: [ // . + < + resourceQuery: /raw/, + type: 'asset/source', + > ] >,

и если вы хотите исключить необработанные активы из обработки другими загрузчиками, используйте отрицательное условие:

module: < rules: [ // . + < + test: /\.m?js$/, + resourceQuery: < not: [/raw/] >, + use: [ . ] + >, < resourceQuery: /raw/, type: 'asset/source', > ] >,

или список правил oneOf . Здесь будет применяться только первое правило сопоставления:

module: < rules: [ // . + < oneOf: [ < resourceQuery: /raw/, type: 'asset/source', >, + < + test: /\.m?js$/, + use: [ . ] + >, + ] > ] >,

Отключить испускающие активы

Для случаев использования, таких как рендеринг на стороне сервера, вы можете отключить испускание активов, что возможно с опцией emit в Rule.generator :

module.exports = < // … module: < rules: [ < test: /\.png$/i, type: 'asset/resource', generator: < emit: false, >, >, ], >, >;

Как добавить картинку на веб-страницу?

Для добавления изображения в документ применяется тег , его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега необходимо указать обязательный атрибут alt , он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.

В XHTML

Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла (пример 1).

Пример 1. Добавление картинки на веб-страницу

HTML5 IE Cr Op Sa Fx

Учтите, что когда используется XHTML или строгий HTML4, то тег допустимо размещать только внутри блочных элементов вроде

или .

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Webpack 5 — Asset Modules

Доброго времени суток. Этим постом хочу начать серию статей про новые возможности грядущего webpack 5. Почему я хочу рассказывать про webpack? Как минимум потому, что я принимаю активное участие в его разработке и постоянно копаюсь в его внутренностях. В данном посте хочу рассказать про Asset Modules — экспериментальную фичу webpack 5, которая позволяет избавиться от нескольких привычных лоадеров, сохранив при этом их пользу.

Представим, что нам нужно собрать страницу с картинками и стилями.

Решение на webpack 4

Конфигурация webpack 4 под эту задачу может выглядеть следующим образом:
webpack.config.js

module.exports = < module: < rules: [ < test: /\.svg$/, use: [ 'file-loader', 'svgo-loader' ] >, < test: /\.css$/, use: [ 'style-loader', 'css-loader' ] >] > >;

src/index.js

import './styles.css'; // . 

src/styles.css

.logo < background: url("/images/logo.svg") no-repeat; background-size: cover; width: 75px; height: 65px; >

Вывод:

/dist/main.js /dist/eb4c5fa504857.svg

При таком подходе все svg-файлы будут обработаны при помощи svgo и при помощи file-loader помещены в директорию с собранным бандлом, а css, при помощи css-loader, превратится в нечто подобное:

.logo

В какой-то момент нам может понадобиться оптимизировать нашу страничку и мы можем захотеть инлайнить изображения прямо в css. Для этого заменим file-loader на url-loader:

Вывод:

/dist/main.js

Собранный css изменится следующим образом:

- background: url("eb4c5fa504857.svg") no-repeat; + background: url("data:image/svg+xml;base64. ") no-repeat;

Далее мы можем захотеть инлайнить только небольшие по размеру svg (например, до 8кб), а все остальные оставлять в виде отдельно лежащих файлов. Для этого, у url-loader есть специальная настройка limit:

После этого, инлайниться будут только svg-файлы до 8кб, остальные svg будут помещены в директорию с собранным бандлом, для них url-loader будет неявно использовать file-loader .

Задача решена, но с использованием webpack 5 и фичи Asset Modules, она решается проще, позволяя избавиться от url-loader и file-loader (его url-loader неявно использует для файлов, размером больше, чем указано в опции limit ).

Решение на webpack 5

Для начала, необходимо явно указать, что мы хотим использовать Asset Modules. Для этого добавим в конфигурацию следующее:

module.exports = < // . + experiments: < + asset: true + >>;

На данный момент это экспериментальная фича и мы ждем от пользователей обратную связь по ее использованию.

После этого, достаточно просто пометить svg-файлы как asset и всё то, что было описано выше касаемо file-loader и url-loader — заработает само, из коробки, без каких-либо лоадеров:

Вот и всё, для файлов, которые попадают под правило с type: ‘asset’ будет применяться следующая логика: Если файл меньше 8кб (по умолчанию), то встроить его в собранный бандл, в ином случае поместить его в директорию с собранным бандлом.
Свойство use так же учитывается.

Помимо asset есть и другие встроенные типы модулей.

asset/inline

Это аналог url-loader . Файлы, которые будут подпадать под правило с type: ‘asset/inline’ будут всегда инлайниться в бандл в виде data-url:

Более того, для type: ‘asset/inline’ можно задавать кастомный генератор data-url.
Например, для svg-файлов можно использовать mini-svg-data-uri , который инлайнит svg как data-url, но без использования base64, что позволяет уменьшить размер встроенного фрагмента:

+ const miniSVGDataURI = require('mini-svg-data-uri'); // . < test: /\.svg$/, type: 'asset/inline', + generator: < + dataUrl(content) < + content = content.toString(); + return miniSVGDataURI(content); + >+ >, use: 'svgo-loader' >,

В результате получим такой css:

- background: url("data:image/svg+xml;base64. ") no-repeat; + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'. ") no-repeat;

Таким образом можно совмещать использование лоадеров и кастомное поведение для генерирования data-url.

asset/resource

Это аналог file-loader. Файлы, которые будут подпадать под правило с type: ‘asset/resource’ будут складываться в директорию с бандлом:

  < test: /\.svg$/, - type: 'asset/inline', + type: 'asset/resource', - generator: < - dataUrl(content) < - content = content.toString(); - return miniSVGDataURI(content); - >- >, use: 'svgo-loader' >,

Указываем путь

По умолчанию, модули с типом asset/resource складываются в директорию, которую вы указываете в output.path (по умолчанию dist ), но при помощи output.assetModuleFilename можно переопределить это поведение:

module.exports = < + output: < + assetModuleFilename: 'assets/[name][ext]' + >, // . >;

Вывод:

/dist/main.js /dist/assets/logo.svg

А заменив [name] на [hash] мы получим прекрасный вариант для long term caching:

module.exports = < output: < - assetModuleFilename: 'assets/[name][ext]' + assetModuleFilename: 'assets/[hash][ext]' >, // . >;

Вывод:

/dist/main.js /dist/assets/eb4c5fa504857.svg

Более того, мы можем переопределить имя выходного файла для конкретного asset-правила. Например, можно складывать svg-иконки в директорию dist/icons , а остальные asset-модули в директорию dist/assets :

 < test: /\.svg$/, type: 'asset/resource', + generator: < + filename: 'icons/[hash][ext]' + >, use: 'svgo-loader'

Вывод:

/dist/main.js /dist/assets/fd441ca8b6d00.png /dist/icons/eb4c5fa504857.svg

asset/source

Это аналог raw-loader. Файлы, которые будут подпадать под правило с type: ‘asset/source’ будут всегда инлайниться в бандл в неизменном виде:
file.txt

hello world

webpack.config.js

module.exports = < // . < test: /\.svg$/, type: 'asset/resource', generator: < filename: 'icons/[hash][ext]' >, use: 'svgo-loader' >, + < + test: /\.txt$/, + type: 'asset/source' + >, // . 

index.js

import './styles.css'; + import txt from './file.txt'; + console.log(txt); // hello world

Вывод:

/dist/main.js /dist/icons/eb4c5fa504857.svg

asset

Объединяет в себе asset/resource и asset/inline , автоматически выбирая что-то одно, в зависимости от некоторых условий. По умолчанию, если размер файла больше 8кб, то применяется стратегия asset/resource , в ином случае — asset/inline .

module.exports = < // . < test: /\.svg$/, - type: 'asset/resource', + type: 'asset' - generator: < - filename: 'icons/[hash][ext]' - >, use: 'svgo-loader' >, < test: /\.txt$/, type: 'asset/source' >, // . 

Лимит для применения asset/inline можно установить:

  < test: /.svg$/, type: 'asset', + parser: < + dataUrlCondition: < + maxSize: 20 * 1024 // 20kb + >+ >, use: 'svgo-loader' >,

Подводя итог: Asset Modules в webpack 5 позволяют отказаться от некоторых привычных лоадеров за счет поддержки их функциональности «из коробки».
Полноценный пример можно посмотреть здесь.

Когда выйдет webpack 5?

Пока нет точной даты выхода. На момент написания этого гайда, последней версией webpack 5 является beta.13 , собирается обратная связь. Вы можете помочь в сборе обратной связи, попытавшись перенести свой проект на webpack 5 (конечно же, пока не используя его а production). Подробнее здесь

P.S

Я и дальше планирую рассказывать о новых возможностях webpack 5 и о самом webpack. Некоторые из статей будут побольше, некоторые поменьше, а совсем мелкие заметки (не только про webpack) можно будет наблюдать в моем телеграмм-канале.

Asset Modules

Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders.

Prior to webpack 5 it was common to use:

• raw-loader to import a file as a string
• url-loader to inline a file into the bundle as a data URI
• file-loader to emit a file into the output directory

Asset Modules types replace all of these loaders by adding 4 new module types:

• asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader .
• asset/inline exports a data URI of the asset. Previously achievable by using url-loader .
• asset/source exports the source code of the asset. Previously achievable by using raw-loader .
• asset automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using url-loader with asset size limit.

When using the old assets loaders (i.e. file-loader / url-loader / raw-loader ) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset’s module type to ‘javascript/auto’ .

webpack.config.js

module.exports = <  module:  rules: [   test: /\.(png|jpg|gif)$/i, use: [   loader: 'url-loader', options:  limit: 8192, > >, ], + type: 'javascript/auto'   >, ] >, >

To exclude assets that came from new URL calls from the asset loaders add dependency: < not: ['url'] >to the loader configuration.

webpack.config.js

module.exports = <  module:  rules: [   test: /\.(png|jpg|gif)$/i, + dependency: < not: ['url'] >,   use: [   loader: 'url-loader', options:  limit: 8192, >, >, ], >, ], > >

Resource assets

webpack.config.js

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist') >, + module:  + rules: [ +  + test: /\.png/, + type: 'asset/resource' + > + ] + >, >;

src/index.js

import mainImage from './images/main.png'; img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'

All .png files will be emitted to the output directory and their paths will be injected into the bundles, besides, you can customize outputPath and publicPath for them.

Custom output filename

By default, asset/resource modules are emitting with [hash][ext][query] filename into output directory.

You can modify this template by setting output.assetModuleFilename in your webpack configuration:

webpack.config.js

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist'), + assetModuleFilename: 'images/[hash][ext][query]'   >, module:  rules: [   test: /\.png/, type: 'asset/resource' > ] >, >;

Another case to customize output filename is to emit some kind of assets to a specified directory:

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist'), + assetModuleFilename: 'images/[hash][ext][query]'   >, module:  rules: [   test: /\.png/, type: 'asset/resource' - > + >, +  + test: /\.html/, + type: 'asset/resource', + generator:  + filename: 'static/[hash][ext][query]' + > + >   ] >, >;

With this configuration all the html files will be emitted into a static directory within the output directory.

Rule.generator.filename is the same as output.assetModuleFilename and works only with asset and asset/resource module types.

Inlining assets

webpack.config.js

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist'), - assetModuleFilename: 'images/[hash][ext][query]'   >, module:  rules: [  - test: /\.png/, - type: 'asset/resource' + test: /\.svg/, + type: 'asset/inline' - >, + > -  - test: /\.html/, - type: 'asset/resource', - generator:  - filename: 'static/[hash][ext][query]' - > - >   ] > >;

src/index.js

- import mainImage from './images/main.png'; + import metroMap from './images/metro.svg';  - img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png' + block.style.background = `url($)`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo. vc3ZnPgo=)

All .svg files will be injected into the bundles as data URI.

Custom data URI generator

By default, data URI emitted by webpack represents file contents encoded by using Base64 algorithm.

If you want to use a custom encoding algorithm, you may specify a custom function to encode a file content:

webpack.config.js

const path = require('path'); + const svgToMiniDataURI = require('mini-svg-data-uri');  module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module:  rules: [   test: /\.svg/, type: 'asset/inline', + generator:  + dataUrl: content =>  + content = content.toString(); + return svgToMiniDataURI(content); + > + >   > ] >, >;

Now all .svg files will be encoded by mini-svg-data-uri package.

Source assets

webpack.config.js

const path = require('path'); - const svgToMiniDataURI = require('mini-svg-data-uri');  module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module:  rules: [  - test: /\.svg/, - type: 'asset/inline', - generator:  - dataUrl: content =>  - content = content.toString(); - return svgToMiniDataURI(content); - > - > + test: /\.txt/, + type: 'asset/source',   > ] >, >;

src/example.txt

Hello world 

src/index.js

- import metroMap from './images/metro.svg'; + import exampleText from './example.txt';  - block.style.background = `url($); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo. vc3ZnPgo=) + block.textContent = exampleText; // 'Hello world'

All .txt files will be injected into the bundles as is.

URL assets

When using new URL(‘./path/to/asset’, import.meta.url) , webpack creates an asset module too.

src/index.js

const logo = new URL('./logo.svg', import.meta.url);

Depending on the target in your configuration, webpack would compile the above code into a different result:

// target: web new URL( __webpack_public_path__ + 'logo.svg', document.baseURI || self.location.href ); // target: webworker new URL(__webpack_public_path__ + 'logo.svg', self.location); // target: node, node-webkit, nwjs, electron-main, electron-renderer, electron-preload, async-node new URL( __webpack_public_path__ + 'logo.svg', require('url').pathToFileUrl(__filename) );

As of webpack 5.38.0, Data URLs are supported in new URL() as well:

src/index.js

const url = new URL('data:,', import.meta.url); console.log(url.href === 'data:,'); console.log(url.protocol === 'data:'); console.log(url.pathname === ',');

General asset type

webpack.config.js

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module:  rules: [  + test: /\.txt/, + type: 'asset',   > ] >, >;

Now webpack will automatically choose between resource and inline by following a default condition: a file with size less than 8kb will be treated as a inline module type and resource module type otherwise.

You can change this condition by setting a Rule.parser.dataUrlCondition.maxSize option on the module rule level of your webpack configuration:

webpack.config.js

const path = require('path'); module.exports = <  entry: './src/index.js', output:  filename: 'main.js', path: path.resolve(__dirname, 'dist') >, module:  rules: [   test: /\.txt/, type: 'asset', + parser:  + dataUrlCondition:  + maxSize: 4 * 1024 // 4kb + > + >   > ] >, >;

Also you can specify a function to decide to inlining a module or not.

Replacing Inline Loader Syntax

Before Asset Modules and Webpack 5, it was possible to use inline syntax with the legacy loaders mentioned above.

It is now recommended to remove all inline loader syntax and use a resourceQuery condition to mimic the functionality of the inline syntax.

For example, in the case of replacing raw-loader with asset/source type:

- import myModule from 'raw-loader!my-module'; + import myModule from 'my-module?raw';

and in the webpack configuration:

module: <  rules: [ // . +  + resourceQuery: /raw/, + type: 'asset/source', + >   ] >,

and if you’d like to exclude raw assets from being processed by other loaders, use a negative condition:

module: <  rules: [ // . +  + test: /\.m?js$/, + resourceQuery: < not: [/raw/] >, + use: [ . ] + >,     resourceQuery: /raw/, type: 'asset/source', > ] >,

or a oneOf list of rules. Here only the first matching rule will be applied:

module: <  rules: [ // . + < oneOf: [     resourceQuery: /raw/, type: 'asset/source', >, +  + test: /\.m?js$/, + use: [ . ] + >, + ] >   ] >,

Disable emitting assets

For use cases like Server side rendering, you might want to disable emitting assets, which is feasible with emit option under Rule.generator :

module.exports =  // … module:  rules: [  test: /\.png$/i, type: 'asset/resource', generator:  emit: false, >, >, ], >, >;

Further Reading