Skip to content
This repository has been archived by the owner on Aug 8, 2019. It is now read-only.

webpack plugins

Tobias Koppers edited this page Dec 20, 2013 · 37 revisions

webpack plugins

config

webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)

Replace resources that matches resourceRegExp with newResource.

webpack.ContextReplacementPlugin(resourceRegExp, newContentRegExp)

Replaces the default regExp generated by parsing with newContextRegExp if the resource (directory) matches resourceRegExp.

webpack.IgnorePlugin(requestRegExp)

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

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

output

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

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)

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)

webpack.optimize.MinChunkSizePlugin(minSize)

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

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)

webpack.optimize.UglifyJsPlugin([options])

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

webpack.optimize.CommonsChunkPlugin(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>

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 Infinitiy.

module styles

webpack.dependencies.LabeledModules()

Support Labeled Modules.

Use component with webpack.

dependency injection

webpack.DefinePlugin(definitions)

Define free variables. The values will be inlined into the code.

A key is a identifier or multiple identifier joined with .. If the value is a string it'll be used a code fragment. If the value isn't a string, it'll be stringified (including functions).

If the value is an object all keys are defined the same way.

Example:

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

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

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

other

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.


For a list of plugins used by webpack internally see internal webpack plugins

Clone this wiki locally