diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx index 9f0a1055bd0c..c15717a99ec7 100644 --- a/src/content/configuration/configuration-languages.mdx +++ b/src/content/configuration/configuration-languages.mdx @@ -19,6 +19,33 @@ contributors: Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the [node-interpret](https://github.com/gulpjs/interpret) package. Using [node-interpret](https://github.com/gulpjs/interpret), webpack can handle many different types of configuration files. +## defineConfig + + + +`defineConfig` is a helper exported from `webpack` that gives editors type-checking and autocomplete for your configuration without any extra type annotations. It is an identity function (a no-op at runtime that simply returns the config you pass in), so it works in plain JavaScript configs too. + +**webpack.config.js** + +```js +const { defineConfig } = require("webpack"); + +module.exports = defineConfig({ + mode: "none", +}); +``` + +It accepts every shape webpack-cli can load: a single configuration object, an array of configurations (multi-compiler), a function returning either of those, an array of such functions, or a `Promise` resolving to any of them. + +```js +const { defineConfig } = require("webpack"); + +module.exports = defineConfig((env, argv) => ({ + mode: argv.mode ?? "development", + // ... +})); +``` + ## TypeScript To write the webpack configuration in [TypeScript](http://www.typescriptlang.org/), you would first install the necessary dependencies, i.e., TypeScript and the relevant type definitions from the [DefinitelyTyped](https://definitelytyped.org/) project: diff --git a/src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.mdx index 283928a1f688..5066301fd63e 100644 --- a/src/content/configuration/entry-context.mdx +++ b/src/content/configuration/entry-context.mdx @@ -88,6 +88,7 @@ export default { chunkLoading: "jsonp", asyncChunks: true, // Create async chunks that are loaded on demand. layer: "name of layer", // set the layer for an entry point + worker: true, // mark as a worker entry, available since webpack 5.108.0 }, }, }; @@ -95,6 +96,8 @@ export default { Descriptor syntax might be used to pass additional options to an entry point. +T> The `worker` flag (added in webpack 5.108.0) marks an entry as a worker so its output file uses [`output.workerChunkFilename`](/configuration/output/#outputworkerchunkfilename) instead of the regular chunk filename. webpack sets it automatically for entries it creates from `new Worker(new URL(...))`, so you rarely set it by hand. + ### Output filename By default, the output filename for the entry chunk is extracted from [`output.filename`](/configuration/output/#outputfilename) but you can specify a custom output filename for a specific entry: diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 8e0ef02756ef..3d97a8300c44 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -405,7 +405,9 @@ import page from "./page.html"; document.documentElement.innerHTML = page; ``` -W> **This feature is experimental and partial.** Webpack 5.107 only implements the `html-loader` side: importing an HTML file from JS runs its tag references through the webpack pipeline. **HTML entry points** (using a `.html` file directly as `entry`, the `html-webpack-plugin` part) are **not supported yet** and are planned for the next minor release. The full story is tracked in issue [#536](https://github.com/webpack/webpack/issues/536). +W> **This feature is experimental and partial.** Webpack 5.107 implemented the `html-loader` role: importing an HTML file from JS runs its tag references through the webpack pipeline. Since 5.108 a `.html` file can also be used as an entry, and the default `./src` entry resolves to `index.html` when this experiment is enabled (see [HTML as the default entry](#html-as-the-default-entry) below). Full parity with `html-webpack-plugin` is still in progress; the overall effort is tracked in issue [#536](https://github.com/webpack/webpack/issues/536). + +T> The HTML parser can be tuned via [`module.parser.html`](/configuration/module/#moduleparserhtml): use [`sources`](/configuration/module/#moduleparserhtmlsources) to disable or customize URL-attribute extraction, and [`template`](/configuration/module/#moduleparserhtmltemplate) to transform the HTML source before parsing. #### Inline `