Internal webpack plugins

This is a list of plugins which are used by webpack internally.

Categories of internal plugins:

environment

Plugins affecting the environment of the compiler.

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

Applies Node.js style filesystem to the compiler.

compiler

Plugins affecting the compiler

MemoryCachePlugin

MemoryCachePlugin()

Adds a cache to the compiler, where modules are cached in memory.

ProgressPlugin

ProgressPlugin(handler)

Hook into the compiler to extract progress information. The handler must have the signature function(percentage, message). Percentage is called with a value between 0 and 1, where 0 indicates the start and 1 the end.

RecordIdsPlugin

RecordIdsPlugin()

Saves and restores module and chunk ids from records.

entry

Plugins, which add entry chunks to the compilation.

EntryPlugin

EntryPlugin(context, entry, options)

Adds an entry chunk on compilation. The chunk is named options.name and contains only one module (plus dependencies). The module is resolved from entry in context (absolute path).

PrefetchPlugin

PrefetchPlugin(context, request)

Prefetches request and dependencies to enable a more parallel compilation. It doesn't create any chunk. The module is resolved from request in context (absolute path).

output

JsonpTemplatePlugin

web/JsonpTemplatePlugin()

Chunks are wrapped into JSONP-calls. A loading algorithm is included in entry chunks. It loads chunks by adding a <script> tag.

It takes no options and sets output.chunkLoading to 'jsonp'. It is configured via the output options:

output.chunkLoadingGlobal is the JSONP function.

output.publicPath is used as path for loading the chunks.

output.chunkFilename is the filename under that chunks are expected.

NodeTemplatePlugin

node/NodeTemplatePlugin(options)

Chunks are wrapped into Node.js modules exporting the bundled modules. The entry chunks loads chunks by requiring them.

options.asyncChunkLoading (boolean) selects 'async-node' instead of 'require' as output.chunkLoading.

LibraryTemplatePlugin

LibraryTemplatePlugin(name, target)

The entries chunks are decorated to form a library name of type type.

WebWorkerTemplatePlugin

webworker/WebWorkerTemplatePlugin()

Chunks are loaded by importScripts. Else it's similar to JsonpTemplatePlugin.

It takes no options and sets output.chunkLoading to 'import-scripts'.

EvalDevToolModulePlugin

EvalDevToolModulePlugin(options)

Decorates the module template by wrapping each module in a eval annotated with a //# sourceURL= comment (options.sourceUrlComment, defaults to //# sourceURL=[url]).

SourceMapDevToolPlugin

SourceMapDevToolPlugin(options)

Decorates the templates by generating a SourceMap for each chunk.

options.filename the filename template of the SourceMap. [fullhash], [name], [id], [file] and [base] are replaced. If this option is missing, the SourceMap will be inlined as DataUrl.

options.append, options.moduleFilenameTemplate, options.fallbackModuleFilenameTemplate and the remaining options are described on the SourceMapDevToolPlugin page.

HotModuleReplacementPlugin

HotModuleReplacementPlugin()

Add support for hot module replacement. Decorates the templates to add runtime code. Adds module.hot API.

It takes no options and reads the following output options:

output.hotUpdateChunkFilename the filename for hot update chunks.

output.hotUpdateMainFilename the filename for the hot update manifest.

output.hotUpdateGlobal the global function name for loading hot updates.

source

Plugins affecting the source code of modules.

APIPlugin

Makes the __webpack_* variables (__webpack_public_path__, __webpack_require__, __webpack_modules__, __webpack_chunk_load__, __webpack_hash__, __webpack_nonce__, ...) accessible in modules and maps require.onError to the runtime's error handler (__webpack_require__.oe).

CompatibilityPlugin

Ensures compatibility with other module loaders by rewriting legacy patterns: browserify-style require delegators, user code that declares its own __webpack_require__, and hashbang lines.

ConstPlugin

Tries to evaluate expressions in if (...) statements and ternaries to replace them with true/false for further possible dead branch elimination using hooks fired by the parser.

There are multiple optimizations in production mode regarding dead branches:

  • The ones performed by Terser
  • The ones performed by webpack

Webpack will try to evaluate conditional statements. If it succeeds then the dead branch is removed. Webpack can't do constant folding unless the compiler knows it. For example:

import { calculateTax } from "./tax";

const FOO = 1;
if (FOO === 0) {
  // dead branch
  calculateTax();
}

In the above example, webpack is unable to prune the branch, but Terser does. However, if FOO is defined using DefinePlugin, webpack will succeed.

It is important to mention that import { calculateTax } from './tax'; will also get pruned because calculateTax() call was in the dead branch and got eliminated.

ProvidePlugin

ProvidePlugin(definitions)

For each name: request entry in definitions, if name is used in a module it is filled by a module loaded by import ... from <request>/import(<request>)/require(<request>).

NodeStuffPlugin

NodeStuffPlugin(options)

Provide stuff that is normally available in Node.js modules.

It also ensures that module is filled with some Node.js stuff if you use it.

RequireJsStuffPlugin

Provide stuff that is normally available in require.js.

require[js].config is removed. require.version is 0.0.0. requirejs.onError is mapped to require.onError.

NodeSourcePlugin

node/NodeSourcePlugin()

This plugin is a no-op kept for backward compatibility. webpack 5 no longer polyfills Node.js core modules or globals such as process and Buffer.

NodeTargetPlugin

node/NodeTargetPlugin()

The plugins should be used if you run the bundle in a Node.js environment.

If ensures that native modules are loaded correctly even if bundled.

AMDPlugin

dependencies/AMDPlugin(options)

Provides AMD-style define and require to modules. Also bind require.amd, define.amd and webpack_amd_options## to the options passed as parameter.

CommonJsPlugin

dependencies/CommonJsPlugin

Provides CommonJs-style require to modules.

RequireContextPlugin

dependencies/RequireContextPlugin()

Provides require.context. Alternative requests for files are derived from the configured resolve options (modules, extensions, mainFiles, enforceExtension).

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

Provides require.ensure.

RequireIncludePlugin

dependencies/RequireIncludePlugin()

Provides require.include.

DefinePlugin

DefinePlugin(definitions)

Define constants for identifier.

definitions is an object.

optimize

Note that all plugins under webpack.optimize namespace should only be used when mode set to 'none'. Otherwise you might get into trouble where plugins are applied twice.

LimitChunkCountPlugin

optimize/LimitChunkCountPlugin(options)

Merge chunks limit chunk count is lower than options.maxChunks.

options.chunkOverhead and options.entryChunkMultiplicator are still accepted but no longer have any effect.

Chunks that reduce the total size the most are merged first. If multiple combinations are equal the minimal merged size wins.

MergeDuplicateChunksPlugin

optimize/MergeDuplicateChunksPlugin()

Chunks with the same modules are merged.

RemoveEmptyChunksPlugin

optimize/RemoveEmptyChunksPlugin()

Chunks that contain no modules (and are neither runtime nor entry chunks) are removed.

MinChunkSizePlugin

optimize/MinChunkSizePlugin({ minChunkSize })

Merges chunks until each chunk has the minimum size of minChunkSize.

ModuleConcatenationPlugin

See the ModuleConcatenationPlugin page for details.

FlagIncludedChunksPlugin

optimize/FlagIncludedChunksPlugin()

Adds chunk ids of chunks which are included in the chunk. This eliminates unnecessary chunk loads.

RealContentHashPlugin

optimize/RealContentHashPlugin()

When optimization.realContentHash option is enabled, webpack will apply RealContentHashPlugin to compiler internally.

Hook

RealContentHashPlugin provides a updateHash 5.8.0+ hook for customizing hash updating:

import webpack from "webpack";

const { RealContentHashPlugin } = webpack.optimize;
// ...
compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
  const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
  hooks.updateHash.tap("MyPlugin", (content, oldHash) => {
    // you can calculate the hash here as you wish
  });
});
Edit this page·

5 Contributors

iAziz786EugeneHlushkoooflorentLegendschenxsan