Asset Modules | webpack

Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders.
Prior to webpack 5 it was common to use:
Asset Modules types replace all of these loaders by adding 5 new module types:
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'.
To exclude assets that came from new URL calls from the asset loaders add dependency: { not: ['url'] } to the loader configuration.
By default, under the hood, the asset type does __webpack_public_path__ + import.meta. This means that setting the output.publicPath in your config will allow you to override the URL from which the asset loads.
If you set the __webpack_public_path__ in code, the way you need to achieve it so as not to break the asset loading logic is to make sure you run it as the first code in your app and not use a function to do so. An example of this would be having a file called publicPath.js with contents
And then in your webpack.config.js updating your entry field to look like
Alternatively, you can do the following in your App.js without modifying your webpack config. The only downside is you have to enforce ordering here and that can collide with some linting tools.
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.
By default, asset/resource modules are emitting with [hash][ext][query][fragment] filename into output directory.
You can modify this template by setting output.assetModuleFilename in your webpack configuration:
Another case to customize output filename is to emit some kind of assets to a specified directory:
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.
All .svg files will be injected into the bundles as data URI.
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:
Now all .svg files will be encoded by mini-svg-data-uri package.
You don't need to add rules when using import text from './file.txt' with { type: "text" }; syntax.
All .txt files will be injected into the bundles as UTF-8 strings.
When using new URL('./path/to/asset', import.meta.url), webpack creates an asset module too.
You don't need to add rules when using const file = new URL('./file.ext', import.meta.url); syntax.
Depending on the target in your configuration, webpack would compile the above code into a different result:
As of webpack 5.38.0, Data URLs are supported in new URL() as well:
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:
Also you can specify a function to decide to inlining a module or not.
You don't need to add rules when using import data from './file.ext' with { type: "bytes" }; syntax.
All .txt files will be injected into the bundles as raw bytes (Uint8Array), without any text encoding or transformation.
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:
and in the webpack configuration:
and if you'd like to exclude raw assets from being processed by other loaders, use a negative condition:
or a oneOf list of rules. Here only the first matching rule will be applied:
When experiments.futureDefaults is enabled, webpack registers the rules above for you: the query suffixes ?raw, ?url, ?inline and ?no-inline work out of the box for any import, similar to Vite's asset queries.
The suffixes are matched anywhere in the query string (?foo&raw works too) as a oneOf list, so only the first matching suffix wins. Since they are plain default rules, your own module.rules take precedence and can override them.
For use cases like Server side rendering, you might want to disable emitting assets, which is feasible with emit option under Rule.generator:
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.