Skip to content

Commit ae6b15e

Browse files
docs(configuration): document HTML module extraction options
Add module.generator.html.extract and the matching output.htmlFilename / output.htmlChunkFilename templates introduced in webpack 5.107.0 for the experimental HTML module pipeline.
1 parent d5388b7 commit ae6b15e

2 files changed

Lines changed: 74 additions & 0 deletions

File tree

src/content/configuration/module.mdx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,13 @@ export default {
200200
// Use `JSON.parse` when the JSON string is longer than 20 characters.
201201
parse: JSONParse,
202202
},
203+
html: {
204+
// Generator options for html modules, requires `experiments.html`, available since webpack 5.107.0
205+
206+
// Emit the parsed and URL-rewritten HTML as a standalone .html output file.
207+
// type: boolean | 'inline'
208+
extract: true,
209+
},
203210
// others…
204211
},
205212
},
@@ -235,6 +242,35 @@ console.log(styles.btn); // hashed class
235242
console.log(styles.BTN); // same hashed class, uppercase alias
236243
```
237244

245+
### module.generator.html.extract
246+
247+
<Badge text="5.107.0+" />
248+
249+
`boolean = true` `'inline'`
250+
251+
Controls whether an [HTML module](/configuration/experiments/#experimentshtml) emits its parsed and URL-rewritten HTML as a standalone `.html` output file alongside the module's JavaScript export, mirroring the CSS extraction pipeline. Requires [`experiments.html`](/configuration/experiments/#experimentshtml).
252+
253+
- `true` - always emit the `.html` file.
254+
- `false` - never emit it.
255+
- `'inline'` - expose the processed HTML for inline write-back (e.g. `<iframe srcdoc>`) without emitting a standalone file.
256+
257+
When unset, extraction defaults to `true` for HTML modules used as compilation entries (HTML entry points) and `false` for HTML modules imported from JavaScript. The emitted filenames follow [`output.htmlFilename`](/configuration/output/#outputhtmlfilename) and [`output.htmlChunkFilename`](/configuration/output/#outputhtmlchunkfilename).
258+
259+
**webpack.config.js**
260+
261+
```js
262+
export default {
263+
experiments: { html: true },
264+
module: {
265+
generator: {
266+
html: {
267+
extract: true,
268+
},
269+
},
270+
},
271+
};
272+
```
273+
238274
## module.parser
239275

240276
<Badge text="5.12.0+" />

src/content/configuration/output.mdx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -904,6 +904,44 @@ export default {
904904

905905
It can be overridden per entry through the [entry descriptor](/configuration/entry-context/#entry-descriptor) `html` option.
906906

907+
## output.htmlFilename
908+
909+
<Badge text="5.107.0+" />
910+
911+
`string = output.filename with '.js' replaced by '.html'` `function (pathData, assetInfo) => string`
912+
913+
The filename template for HTML files emitted by [extracted HTML modules](/configuration/module/#modulegeneratorhtmlextract) (initial chunks). It works like [`output.filename`](#outputfilename) and supports the same [template strings](#template-strings). When unset, it is derived from `output.filename` by swapping the `.js` extension for `.html` (falling back to `[name].html` when `output.filename` is a function), mirroring how `cssFilename` derives from `filename`.
914+
915+
```js
916+
// webpack.config.js
917+
export default {
918+
experiments: { html: true },
919+
output: {
920+
htmlFilename: "[name].html",
921+
},
922+
};
923+
```
924+
925+
W> You must **not** specify an absolute path here. The path may contain folders separated by `/`, and is joined with [`output.path`](#outputpath) to determine the location on disk.
926+
927+
## output.htmlChunkFilename
928+
929+
<Badge text="5.107.0+" />
930+
931+
`string = output.chunkFilename with '.js' replaced by '.html'` `function (pathData, assetInfo) => string`
932+
933+
The filename template for HTML files emitted by [extracted HTML modules](/configuration/module/#modulegeneratorhtmlextract) for non-initial (on-demand) chunks. It defaults from [`output.chunkFilename`](#outputchunkfilename) the same way `htmlFilename` defaults from `filename`.
934+
935+
```js
936+
// webpack.config.js
937+
export default {
938+
experiments: { html: true },
939+
output: {
940+
htmlChunkFilename: "[name].chunk.html",
941+
},
942+
};
943+
```
944+
907945
## output.iife
908946

909947
`boolean = true`

0 commit comments

Comments
 (0)