Skip to content
sokra edited this page Sep 18, 2014 · 111 revisions

config

NormalModuleReplacementPlugin

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)

Replace resources that matches resourceRegExp with newResource. If newResource is relative, it is resolve relative to the previous resource.

ContextReplacementPlugin

new webpack.ContextReplacementPlugin(
				resourceRegExp, 
				[newContentResource],
				[newContentRecursive],
				[newContentRegExp])

Replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive resp. newContextRegExp if the resource (directory) matches resourceRegExp. If newContentResource is relative, it is resolve relative to the previous resource.

IgnorePlugin

new webpack.IgnorePlugin(requestRegExp, [contextRegExp])

Don't generate modules for requests matching the provided RegExp.

  • requestRegExp A RegExp to test the request again.
  • contextRegExp (optional) A RegExp to test the context (directory) again.

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

A request for a normal module, which is resolved and built even before a require to it occurs. This can boost performance. Try to profile the build first to determine clever prefetching points.

context a absolute path to a directory

request a request string for a normal module

ResolverPlugin

new webpack.ResolverPlugin(plugins, [types])

Apply a plugin (or array of plugins) to one or more resolvers (as specified in types).

plugins a plugin or an array of plugins that should be applied to the resolver(s).

types a resolver type or an array of resolver types (default: ["normal"], resolver types: normal, context, loader)

All plugins from enhanced-resolve are exported as properties for the ResolverPlugin.

Example:

new webpack.ResolverPlugin([
	new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"])

output

BannerPlugin

new webpack.BannerPlugin(banner, options)

Adds a banner to the top of each generated chunk.

banner a string, it will be wrapped in a comment

options.raw if true, banner will not be wrapped in a comment

options.entryOnly if true, the banner will only be added to the entry chunks.

optimize

DedupePlugin

new webpack.optimize.DedupePlugin()

Search for equal or similar files and deduplicate them in the output. This comes with some overhead for the entry chunk, but can reduce file size effectively.

This is experimental and may crash, because of some missing implementations. (Report an issue)

LimitChunkCountPlugin

new webpack.optimize.LimitChunkCountPlugin(options)

Limit the chunk count to a defined value. Chunks are merged until it fits.

options.maxChunks (number) max number of chunks

options.chunkOverhead (number) an additional overhead for each chunk in bytes (default 10000, to reflect request delay)

options.entryChunkMultiplicator (number) a multiplicator for entry chunks (default 10, entry chunks are merged 10 times less likely)

MinChunkSizePlugin

new webpack.optimize.MinChunkSizePlugin(minSize)

Merge small chunks that are lower than this min size (in chars). Size is approximated.

OccurenceOrderPlugin

new webpack.optimize.OccurenceOrderPlugin(preferEntry)

Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This make ids predictable, reduces to total file size and is recommended.

preferEntry (boolean) give entry chunks higher priority. This make entry chunks smaller but increases the overall size. (recommended)

UglifyJsPlugin

new webpack.optimize.UglifyJsPlugin([options])

Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode. You can pass an object containing UglifyJs options.

new ngMinPlugin([options]);

Runs the ngmin pre-minimizer to insert AngularJS DI annotations.

CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin([chunkName], filename, [entryPoints], [minChunks])

Generates an extra chunk, which contains common modules shared between at least minChunks entry points. You must load the generated chunk before the entry point:

<script src="commons.js" charset="utf-8"></script>
<script src="entry.bundle.js" charset="utf-8"></script>

chunkName is the internal name of the chunk. You pass a name of an existing chunk to reuse it (i. e. to add stuff to the commons chunk).

filename the filename of the commons chunk (like output.filename). Accepts [hash], [chunkhash], etc.

entryPoints an array of entry points that should be used to generate these commons chunk. By default all entry points will be used.

minChunks the number of entry point that need to have a module in common. By default it need to be in all entry points. Allowed values are 2 <= minChunks <= entry points count or Infinity. Passing Infinity doesn't move any module into the commons chunk (use this if you want manual control over the content for better long-term-caching).

AggressiveMergingPlugin

new webpack.optimize.AggressiveMergingPlugin(options)

A plugin for a more aggressive chunk merging strategy. Even similar chunks are merged if the total size is reduced enough. As an option modules that are not common in these chunks can be moved up the chunk tree to the parents.

options.minSizeReduce A factor which defines the minimal required size reduction for chunk merging. Defaults to 1.5 which means that the total size need to be reduce by 50% for chunk merging.

options.moveToParents When set, modules that are not in both merged chunks are moved to all parents of the chunk. Defaults to false.

options.entryChunkMultiplicator When options.moveToParents is set, moving to an entry chunk is more expensive. Defaults to 10, which means moving to an entry chunk is ten times more expensive than moving to an normal chunk.

Generates a HTML5 Application Cache manifest

module styles

LabeledModulesPlugin

new webpack.dependencies.LabeledModulesPlugin()

Support Labeled Modules.

Use component with webpack.

Use angular.js modules with webpack.

dependency injection

DefinePlugin

new webpack.DefinePlugin(definitions)

Define free variables. Useful for having development builds with debug logging or adding global constants.

Example:

new webpack.DefinePlugin({
	VERSION: JSON.stringify("5fa3b9"),
	BROWSER_SUPPORTS_HTML5: true,
	TWO: "1+1",
	"typeof window": JSON.stringify("object")
})
console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

Each key passed into DefinePlugin is an identifier or multiple identifiers joined with ..

  • If the value is a string it will be used as a code fragment.
  • If the value isn't a string, it will be stringified (including functions).
  • If the value is an object all keys are defined the same way.
  • If you prefix typeof to the key, it's only defined for typeof calls.

The values will be inlined into the code which allows a minification pass to remove the redundant conditional.

Example:

if(DEBUG)
	console.log('Debug info')
if(PRODUCTION)
	console.log('Production log')

After passing through webpack with no minification results in:

if(false)
	console.log('Debug info')
if(true)
	console.log('Production log')

and then after a minification pass results in:

console.log('Production log')

ProvidePlugin

new webpack.ProvidePlugin(definitions)

Automatically loaded modules. Module (value) is loaded when the identifier (key) is used as free variable in a module. The identifier is filled with the exports of the loaded module.

Example:

new webpack.ProvidePlugin({
	$: "jquery"
})
// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"

Use rewire in webpack.

localization

new I18nPlugin(translations: Object, fnName = "__": String)

Create bundles with translations baked in. Then you can serve the translated bundle to your clients.

other

HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

Enables Hot Module Replacement. (This requires records data if not in dev-server mode, recordsPath)

Generates Hot Update Chunks of each chunk in the records. It also enables the API and makes __webpack_hash__ available in the bundle.

ExtendedAPIPlugin

new webpack.ExtendedAPIPlugin()

Adds useful free vars to the bundle.

__webpack_hash__ The hash of the compilation available as free var.

WARNING: Don't combine it with the HotModuleReplacementPlugin. It would break and you don't need it as the HotModuleReplacementPlugin export the same stuff.

NoErrorsPlugin

new webpack.NoErrorsPlugin()

When there are errors while compiling this plugin skips the emitting phase (and recording phase), so there are no assets emitted that include errors. The emitted flag in the stats is false for all assets.

Clone this wiki locally