From 26ac40cff41c98a2847b43df1e9a5fb6c93aad5b Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Thu, 9 Oct 2025 16:15:36 +0530 Subject: [PATCH 1/7] docs(guides): update getting-started to use ES6 syntax Fixes #7636 --- src/content/guides/getting-started.mdx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 5f0d559f1a1d..fe7ffa2f903a 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -247,9 +247,12 @@ As of version 4, webpack doesn't require any configuration, but most projects wi **webpack.config.js** ```javascript -const path = require('path'); +import path from 'path'; +import { fileURLToPath } from 'url'; -module.exports = { +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +export default { entry: './src/index.js', output: { filename: 'main.js', From ffc75774ffc7ee2a18a0d864a9530adb44c1b5c6 Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Sun, 12 Oct 2025 13:54:35 +0530 Subject: [PATCH 2/7] Update src/content/guides/getting-started.mdx Co-authored-by: Even Stensberg --- src/content/guides/getting-started.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index fe7ffa2f903a..6fdc124c5990 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -244,7 +244,7 @@ As of version 4, webpack doesn't require any configuration, but most projects wi |- index.js ``` -**webpack.config.js** +**webpack.config.mjs** ```javascript import path from 'path'; From 2a018b4bd449db2c3bc630d7cda2466628adfa98 Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Sun, 12 Oct 2025 14:42:29 +0530 Subject: [PATCH 3/7] docs(guides): add examples for mjs and cjs configs --- src/content/guides/getting-started.mdx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 6fdc124c5990..e74f2aa60120 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -244,7 +244,9 @@ As of version 4, webpack doesn't require any configuration, but most projects wi |- index.js ``` -**webpack.config.mjs** + + + ```javascript import path from 'path'; @@ -259,7 +261,22 @@ export default { path: path.resolve(__dirname, 'dist'), }, }; -``` + + + +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist'), + }, +}; + + + + Now, let's run the build again but instead using our new configuration file: From 5b9bdfe695b03615499fc183369b6e17c279f612 Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Thu, 30 Oct 2025 03:04:32 +0530 Subject: [PATCH 4/7] fix(docs): refine config file extension labels to cjs --- src/content/guides/getting-started.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index e74f2aa60120..9416b40e0c35 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -248,7 +248,7 @@ As of version 4, webpack doesn't require any configuration, but most projects wi -```javascript +````javascript import path from 'path'; import { fileURLToPath } from 'url'; @@ -263,7 +263,7 @@ export default { }; - + const path = require('path'); module.exports = { @@ -289,7 +289,7 @@ cacheable modules 530 KiB ./src/index.js 257 bytes [built] [code generated] ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] webpack 5.4.0 compiled successfully in 1934 ms -``` +```` T> If a `webpack.config.js` is present, the `webpack` command picks it up by default. We use the `--config` option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files. From 8ad92f601fbed8fe5420b9690d5cad72bb3129ab Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Sun, 16 Nov 2025 01:42:46 +0530 Subject: [PATCH 5/7] docs: Remove outdated content from asset-modules --- src/content/guides/asset-modules.mdx | 563 +-------------------------- 1 file changed, 15 insertions(+), 548 deletions(-) diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 6af7c775666f..ee4973d5356e 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -2,83 +2,25 @@ title: Asset Modules sort: 25 contributors: - - smelukov - - EugeneHlushko - - chenxsan - - anshumanv - - spence-s - - dkdk225 - - alexander-akait +  - smelukov +  - EugeneHlushko +  - chenxsan +  - anshumanv +  - spence-s +  - dkdk225 +  - alexander-akait related: - - title: webpack 5 - Asset Modules - url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h +  - title: webpack 5 - Asset Modules +    url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h --- -Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders. +Asset Modules provide a built-in way to use asset files (fonts, icons, etc.) without configuring additional loaders. Asset Modules provide five new module types: -Prior to webpack 5 it was common to use: - -- [`raw-loader`](https://v4.webpack.js.org/loaders/raw-loader/) to import a file as a string -- [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) to inline a file into the bundle as a data URI -- [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) to emit a file into the output directory - -Asset Modules types replace all of these loaders by adding 5 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/resource` emits a separate file and exports the URL. +- `asset/inline` exports a data URI of the asset. +- `asset/source` exports the source code of the asset. - `asset/bytes` exports a [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) view of the asset. -- `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** - -```diff -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** - -```diff -module.exports = { - module: { - rules: [ - { - test: /\.(png|jpg|gif)$/i, -+ dependency: { not: ['url'] }, - use: [ - { - loader: 'url-loader', - options: { - limit: 8192, - }, - }, - ], - }, - ], - } -} -``` +- `asset` automatically chooses between exporting a data URI and emitting a separate file. ## Public Path @@ -89,479 +31,4 @@ By default, under the hood, the `asset` type does `__webpack_public_path__ + imp 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 ```javascript -__webpack_public_path__ = 'https://cdn.url.com'; -``` - -And then in your `webpack.config.js` updating your `entry` field to look like - -```javascript -module.exports = { - entry: ['./publicPath.js', './App.js'], -}; -``` - -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. - -```javascript -import './publicPath.js'; -``` - -## Resource type - -**webpack.config.js** - -```diff -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** - -```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`](/configuration/module/#rulegeneratoroutputpath) and [`publicPath`](/configuration/module/#rulegeneratorpublicpath) 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`](/configuration/output/#outputassetmodulefilename) in your webpack configuration: - -**webpack.config.js** - -```diff -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: - -```diff -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: /\.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`](/configuration/output/#outputassetmodulefilename) and works only with `asset` and `asset/resource` module types. - -## Inlining assets - -**webpack.config.js** - -```js -const path = require('path'); - -module.exports = { - entry: './src/index.js', - output: { - filename: 'main.js', - path: path.resolve(__dirname, 'dist'), - }, - module: { - rules: [ -+ { -+ test: /\.svg/, -+ type: 'asset/inline', -+ }, - ], - }, -}; -``` - -**src/index.js** - -```js -import metroMap from './images/metro.svg'; - -block.style.background = `url(${metroMap})`; // 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** - -```diff -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 type - -**webpack.config.js** - -```diff -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/source', -+ }, - ], - }, -}; -``` - -T> You don't need to add rules when using `import text from './file.txt' with { type: "text" };` syntax. - -**src/example.txt** - -```text -Hello world -``` - -**src/index.js** - -```js -import exampleText from './example.txt'; - -block.textContent = exampleText; // 'Hello world'; -``` - -Alternative usage: - -**src/index.js** - -```js -import exampleText from './example.txt' with { type: 'text' }; - -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. - -T> You don't need to add rules when using `const file = new URL('./file.ext', import.meta.url);` syntax. - -**src/index.js** - -```js -const logo = new URL('./logo.svg', import.meta.url); -``` - -Depending on the [`target`](/configuration/target/) in your configuration, webpack would compile the above code into a different result: - -```js -// 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) are supported in `new URL()` as well: - -**src/index.js** - -```js -const url = new URL('data:,', import.meta.url); -console.log(url.href === 'data:,'); -console.log(url.protocol === 'data:'); -console.log(url.pathname === ','); -``` - -## Asset type - -**webpack.config.js** - -```diff -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`](/configuration/module/#ruleparserdataurlcondition) option on the module rule level of your webpack configuration: - -**webpack.config.js** - -```diff -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](/configuration/module/#ruleparserdataurlcondition) to decide to inlining a module or not. - -## Bytes type - -**webpack.config.js** - -```diff -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/bytes', -+ }, - ], - }, -}; -``` - -T> You don't need to add rules when using `import data from './file.ext' with { type: "bytes" };` syntax. - -**src/example.txt** - -```text -Hello world -``` - -**src/index.js** - -```js -import exampleText from './example.txt'; - -const decoder = new TextDecoder('utf-8'); -const textString = decoder.decode(exampleText); // 'Uint8Array' - -block.textContent = exampleText; // 'Hello world'; -``` - -Alternative usage: - -**src/index.js** - -```js -import exampleText from './example.txt' with { type: 'bytes' }; - -const decoder = new TextDecoder('utf-8'); -const textString = decoder.decode(exampleText); // 'Uint8Array' - -block.textContent = exampleText; // 'Hello world'; -``` - -All `.txt` files will be injected into the bundles as is. - -## Replacing Inline Loader Syntax - -Before Asset Modules and Webpack 5, it was possible to use [inline syntax](https://webpack.js.org/concepts/loaders/#inline) 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: - -```diff -- import myModule from 'raw-loader!my-module'; -+ import myModule from 'my-module?raw'; -``` - -and in the webpack configuration: - -```diff -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: - -```diff -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: - -```diff -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`](/configuration/module/#rulegeneratoremit) option under `Rule.generator`: - -```js -module.exports = { - // … - module: { - rules: [ - { - test: /\.png$/i, - type: 'asset/resource', - generator: { - emit: false, - }, - }, - ], - }, -}; -``` +__webpack_public_path__ = '[https://cdn.url.com](https://cdn.url.com)'; \ No newline at end of file From 7f252ab96b4cb841e953e4f350ab9e32bb2e1b40 Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Tue, 18 Nov 2025 15:44:25 +0530 Subject: [PATCH 6/7] fix: Resolve linting errors and duplicates in asset modules --- src/content/guides/asset-modules.mdx | 429 ++++++++++++++++++++++++++- 1 file changed, 419 insertions(+), 10 deletions(-) diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index ee4973d5356e..ef79ae41bfe4 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -2,16 +2,16 @@ title: Asset Modules sort: 25 contributors: -  - smelukov -  - EugeneHlushko -  - chenxsan -  - anshumanv -  - spence-s -  - dkdk225 -  - alexander-akait + - smelukov + - EugeneHlushko + - chenxsan + - anshumanv + - spence-s + - dkdk225 + - alexander-akait related: -  - title: webpack 5 - Asset Modules -    url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h + - title: webpack 5 - Asset Modules + url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h --- Asset Modules provide a built-in way to use asset files (fonts, icons, etc.) without configuring additional loaders. Asset Modules provide five new module types: @@ -31,4 +31,413 @@ By default, under the hood, the `asset` type does `__webpack_public_path__ + imp 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 ```javascript -__webpack_public_path__ = '[https://cdn.url.com](https://cdn.url.com)'; \ No newline at end of file +__webpack_public_path__ = '[https://cdn.url.com](https://cdn.url.com)'; +``` + +And then in your `webpack.config.js` updating your `entry` field to look like + +```javascript +module.exports = { + entry: ['./publicPath.js', './App.js'], +}; +``` + +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. + +```javascript +import './publicPath.js'; +``` + +## Resource type + +**webpack.config.js** + +```diff +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** + +```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`](/configuration/module/#rulegeneratoroutputpath) and [`publicPath`](/configuration/module/#rulegeneratorpublicpath) 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`](/configuration/output/#outputassetmodulefilename) in your webpack configuration: + +**webpack.config.js** + +```diff +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: + +```diff +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: /\.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`](/configuration/output/#outputassetmodulefilename) and works only with `asset` and `asset/resource` module types. + +## Inlining assets + +**webpack.config.js** + +```js +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist'), + }, + module: { + rules: [ ++ { ++ test: /\.svg/, ++ type: 'asset/inline', ++ }, + ], + }, +}; +``` + +**src/index.js** + +```js +import metroMap from './images/metro.svg'; + +block.style.background = `url(${metroMap})`; // 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** + +```diff +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 type + +**webpack.config.js** + +```diff +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/source', ++ }, + ], + }, +}; +``` + +T> You don't need to add rules when using `import text from './file.txt' with { type: "text" };` syntax. + +**src/example.txt** + +```text +Hello world +``` + +**src/index.js** + +```js +import exampleText from './example.txt'; + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** + +```js +import exampleText from './example.txt' with { type: 'text' }; + +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. + +T> You don't need to add rules when using `const file = new URL('./file.ext', import.meta.url);` syntax. + +**src/index.js** + +```js +const logo = new URL('./logo.svg', import.meta.url); +``` + +Depending on the [`target`](/configuration/target/) in your configuration, webpack would compile the above code into a different result: + +```js +// 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) are supported in `new URL()` as well: + +**src/index.js** + +```js +const url = new URL('data:,', import.meta.url); +console.log(url.href === 'data:,'); +console.log(url.protocol === 'data:'); +console.log(url.pathname === ','); +``` + +## Asset type + +**webpack.config.js** + +```diff +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`](/configuration/module/#ruleparserdataurlcondition) option on the module rule level of your webpack configuration: + +**webpack.config.js** + +```diff +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](/configuration/module/#ruleparserdataurlcondition) to decide to inlining a module or not. + +## Bytes type + +**webpack.config.js** + +```diff +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/bytes', ++ }, + ], + }, +}; +``` + +T> You don't need to add rules when using `import data from './file.ext' with { type: "bytes" };` syntax. + +**src/example.txt** + +```text +Hello world +``` + +**src/index.js** + +```js +import exampleText from './example.txt'; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** + +```js +import exampleText from './example.txt' with { type: 'bytes' }; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +All `.txt` files will be injected into the bundles as is. + +## Disable emitting assets + +For use cases like Server side rendering, you might want to disable emitting assets, which is feasible with [`emit`](/configuration/module/#rulegeneratoremit) option under `Rule.generator`: + +```js +module.exports = { + // … + module: { + rules: [ + { + test: /\.png$/i, + type: 'asset/resource', + generator: { + emit: false, + }, + }, + ], + }, +}; +``` \ No newline at end of file From 6af0e90d5d16f9ba3044c455a52cd011c9bcdf13 Mon Sep 17 00:00:00 2001 From: jashtanna007 Date: Tue, 18 Nov 2025 15:54:10 +0530 Subject: [PATCH 7/7] fix: Correct publicPath code snippet --- src/content/guides/asset-modules.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index ef79ae41bfe4..88c289c0feec 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -31,7 +31,7 @@ By default, under the hood, the `asset` type does `__webpack_public_path__ + imp 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 ```javascript -__webpack_public_path__ = '[https://cdn.url.com](https://cdn.url.com)'; +__webpack_public_path__ = 'https://cdn.url.com'; ``` And then in your `webpack.config.js` updating your `entry` field to look like