●Change8

v5.109.0

📦 webpackView on GitHub →
✨ 33 features⚡ 1 deprecations🔧 31 symbols

Summary

This release introduces significant enhancements to built-in TypeScript, CSS, and HTML support, alongside improved CommonJS module handling and new output and experiment options. It also adds features for resource hints, build progress, and advanced HTML generation.

Migration Steps

  1. Opt out of CommonJS module concatenation by setting `optimization.concatenateModules: { commonjs: false }` if needed.

✨ New Features

  • Default `experiments.typescript` to "auto", enabling built-in TypeScript support on Node.js >= 22.6 when no TypeScript loader is registered.
  • Default `experiments.css`, `experiments.html` and `experiments.asyncWebAssembly` to "auto", enabling built-in support unless a loader is registered for those files.
  • Added `output.resourceHints` to emit resource hints (`preload`/`prefetch`/`modulepreload`/`preconnect`), on by default for ESM output.
  • Added built-in build progress via `infrastructureLogging.progress`, plus `estimatedTime`, `phaseTimings`, progress bar `width` and `progressBar: "auto"` on `ProgressPlugin`.
  • Concatenate CommonJS modules with statically analyzable exports.
  • Wrap "weird" CommonJS modules into module concatenation instead of bailing out.
  • Added `output.html.inline` (`true | "script" | "style"`) and the `webpackInline` magic comment to inline chunk content into HTML.
  • Added `output.html.inject` to control where chunk tags are injected.
  • Added `output.html.title`, `output.html.meta` and `output.html.base` options for head generation.
  • Support per-icon link attributes (`sizes`, `media`, `color`, `type`, `crossorigin`) and arrays in `output.html.favicon`.
  • Added `output.html.manifest` to generate and link a web app manifest with hashed icons.
  • Added `output.html.csp` to inject a Content-Security-Policy meta with inline-content hashes and an optional nonce.
  • Added the `output.html` `injectTags` compilation hook to inject tags (script/link/meta/…) with `injectTo` placement.
  • Added the `output.html` `transformTags` compilation hook to mutate, remove, or move (between `<head>` and `<body>`) a page's existing `<script>`/`<link>`/`<style>`/`<meta>` tags.
  • Extended the HTML pipeline with `html` link sources (bundled as their own emitted page) and `rel="preload"`/`"prefetch"` links bundled as chunks.
  • Recognize more asset-bearing HTML sources: the `twitter:player:stream` meta, legacy SVG references, and Web App Manifest `icons`/`screenshots`/`shortcuts` URLs.
  • Added `module.parser.html.as` to parse HTML as a document or an element fragment.
  • Allow disabling a built-in HTML parser source via `type: false` in `sources`.
  • Export `webpack.html.HtmlModulesPlugin` with `transformHtml`/`htmlEmitted` compilation hooks.
  • Resolve `@custom-media` (including media-type values) and `@custom-selector` in native CSS.
  • Scope `view-transition-name`/`-group`/`-class` names and `::view-transition-*()` pseudo references in CSS modules under `customIdents`.
  • Added `import.meta.glob` support, with a `caseSensitive` option and consistent hidden/`node_modules` matching.
  • Resolve `import.meta.resolve("./asset")` to the emitted asset URL via the `importMeta.resolve` parser option.
  • Added `import.meta.env` defaults: `MODE`, `DEV`, `PROD`, `SSR` and `BASE_URL`.
  • Added fine-grained `import.meta` parser options.
  • Emit analyzable `new URL(…, import.meta.url)`, worker/worklet URL and `import()` references with literal specifiers for ESM module output.
  • Compile async modules to generators for targets without async/await.
  • Evaluate and validate the second argument of dynamic `import(specifier, options)`.
  • Added `module.parser.javascript.worklet` to bundle Worklet `addModule()` entries.
  • Added `?raw`, `?url`, `?inline` and `?no-inline` asset query suffixes under `experiments.futureDefaults`.
  • Added an `interop` (`"default" | "esModule"`) hint for object externals to control default-export interop.
  • Added an `amd-async` externals type that loads AMD externals without an AMD library wrapper.
  • Support `cache.compression: "zstd"` for the filesystem cache.

Affected Symbols

experiments.typescriptexperiments.cssexperiments.htmlexperiments.asyncWebAssemblyoutput.resourceHintsmodule.parser.<type>.urlHintscss.fontPreloadjavascript.dynamicImportCssPreloadinfrastructureLogging.progressProgressPluginoptimization.concatenateModulesoutput.html.inlineoutput.html.injectoutput.html.titleoutput.html.metaoutput.html.baseoutput.html.faviconoutput.html.manifestoutput.html.cspoutput.html.injectTagsoutput.html.transformTagswebpack.html.HtmlModulesPluginmodule.parser.html.asimport.meta.globimportMeta.resolveimport.meta.envimportMetaContextimportMeta.webpackContextmodule.parser.javascript.workletexperiments.futureDefaultscache.compression

⚡ Deprecations

  • The `importMetaContext` parser option is deprecated in favor of `importMeta.webpackContext`.