MinimizerWebpackPlugin | webpack

This plugin minifies your assets in a webpack build. It ships with several built-in minimizers covering JavaScript, JSON, HTML, CSS, and images — pick one with the minify option and target the right files with test.
JavaScript minimizers:
These only minify — they never change an image's format or name; see Images.
Transport encodings:
All of the non-default minimizers are declared as optional peer dependencies — install only the ones you actually use. One plugin instance covers several languages at once: give minify an array and each minimizer is offered only the assets its own filter accepts, so JS, CSS, HTML and JSON share a single worker pool (see Examples).
Webpack v5 comes with the latest minimizer-webpack-plugin out of the box. If you are using Webpack v5 or above and wish to customize the options, you will still need to install minimizer-webpack-plugin. Using Webpack v4, you have to install terser-webpack-plugin v4 (minimizer-webpack-plugin is only published for Webpack v5+).
To begin, you'll need to install minimizer-webpack-plugin:
Then add the plugin to your webpack configuration. For example:
Finally, run webpack using the method you normally use (e.g., via CLI or an npm script).
Works only with source-map, inline-source-map, hidden-source-map and nosources-source-map values for the devtool option.
Using supported devtool values enable source map generation.
Default: /\.m?js(\?.*)?$/i
Test to match files against.
Use multi-process parallel running to improve the build speed.
Default number of concurrent runs: os.cpus().length - 1 or os.availableParallelism() - 1 (if this function is supported).
Parallelization can speedup your build significantly and is therefore highly recommended.
If you use Circle CI or any other environment that doesn't provide the real available count of CPUs then you need to explicitly set up the number of CPUs to avoid Error: Call retries were exceeded (see #143, #202).
Enable/disable multi-process parallel running.
Enable multi-process parallel running and set number of concurrent runs.
Default: MinimizerPlugin.terserMinify
Which minimizer runs, and the options it runs with. By default the plugin uses terser; overriding it is also how you test an unpublished version or a fork. The default stands whether or not a generate was configured too, and so does test's: the JavaScript minifier and the names it reads are what this plugin is.
Nothing minifying is an empty array rather than a missing value, for an instance whose whole job is its generate:
false is not accepted. A list with nothing in it needs no guard at any of the places that run the minimizers — each simply does nothing — while a second kind of value does.
Always use require inside minify function when parallel option enabled.
The form to prefer: the minimizer and its own options in one place.
options reaches the minify function as its third argument, and what it takes is that minimizer's own: Terser's minify options for the default one, and the tables in webpack's own minimizers for cssMinify and htmlMinify.
implementation may also name a module path rather than hold the function itself — a string, or { path, export } for a named export, the way sass-loader takes its implementation. A worker then requires the minimizer, which is what the default terser is named by; one written as a function is handed over as source for the worker to rebuild with new Function:
The saving is per task, so it needs every minimizer of that task to be nameable: one written as a function anywhere in the list leaves the whole task on the source path, since that function has no other way across. So does a function anywhere in what the task carries — an extractComments callback, or a minimizer's own options holding one — because a required minimizer is handed the payload as it is, and a structured clone throws on a function.
filter(name, info) states which assets this minimizer is offered — return false to decline one, and anything else (undefined included) to accept. It answers for a filter property on the minimizer function itself, which is what the built-ins carry, so setting it here is how you narrow one of them without wrapping it.
Two keys are filled in before a minimizer sees them, and only when options does not set them itself: ecma, from output.environment, and module, from the asset's own javascriptModule info or its .mjs / .cjs extension. Setting either yourself wins, including module: false.
Several minimizers are an array of objects, rather than one object holding two lists that have to line up. Each asset is dispatched to the minimizers whose filter accepts it, and when more than one accepts the same asset the output of each is fed to the next (the chain semantic). Warnings, errors and extracted comments from all of them are merged.
Each entry carries its own filter as well as its own options, which is how the same minimizer runs twice over different assets:
This is also what lets one plugin instance and one worker pool handle every asset type: each built-in ships with a filter matching its natural extension, so JS, CSS, HTML and JSON need no second instance. test still defaults to JS only, so widen it to let the other assets reach the dispatcher:
Pair it with webpack's own cssMinify and htmlMinify and the source a document or a stylesheet nests inside itself is minified too — see Embedded source.
A bare function is shorthand for an object with no options. A custom one says what it can do through properties on the function itself — each optional, and each answering a question the plugin would otherwise have to guess at.
A minifier that nests other languages inside what it prints — a document with an inline <style>, a stylesheet with a data: URL — hands each nested body out instead of minifying it itself. It declares which languages it can offer, and the plugin passes renderEmbeddedSource in its options when something else claims one of them:
renderEmbeddedSource(source, { type, as }) answers { code?, warning