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. If newResource
is a function, it is expected to overwrite the ?request? attribute of the supplied object.
ContextReplacementPlugin
new webpack.ContextReplacementPlugin( resourceRegExp, [newContentResource], [newContentRecursive], [newContentRegExp])
If the resource (directory) matches resourceRegExp
, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource
, newContentRecursive
or newContextRegExp
respectively. If newContentResource
is relative, it is resolve relative to the previous resource. If newContentResource
is a function, it is expected to overwrite the ?request? attribute of the supplied object.
IgnorePlugin
new webpack.IgnorePlugin(requestRegExp, [contextRegExp])
Don?t generate modules for requests matching the provided RegExp.
-
requestRegExp
A RegExp to test the request against. -
contextRegExp
(optional) A RegExp to test the context (directory) against.
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"])
ResolverPlugin.FileAppendPlugin
This plugin will append a path to the module directory to find a match, which can be useful if you have a module which has an incorrect ?main? entry in its package.json/bower.json etc (e.g. "main": "Gruntfile.js"
). You can use this plugin as a special case to load the correct file for this module. Example:
new webpack.ResolverPlugin([ new webpack.ResolverPlugin.FileAppendPlugin(['/dist/compiled-moduled.js']) ])
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 doesn?t change the module semantics at all. Don?t expect to solve problems with multiple module instance. They won?t be one instance after deduplication.
Note: Don?t use it in watch mode. Only for production builds.
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(options)
Merge small chunks that are lower than this min size (in chars). Size is approximated.
options.minChunkSize
(number) chunks smaller than this number will be merged
OccurrenceOrderPlugin
new webpack.optimize.OccurrenceOrderPlugin(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 webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
Additional options:
sourceMap
The plugin uses SourceMaps to map error message locations to modules. This slows down the compilation. (default true
)
test
, include
, exclude
RegExp or array of RegExps to filter processed files (default test: /\.js($|\?)/i
)
Mangling names configuration
A specific configuration is about mangling variable names. By default the mangle option is false. But you can configure the plugin to avoid mangling specific variable names by passing an except list:
new webpack.optimize.UglifyJsPlugin({ mangle: { except: ['$super', '$', 'exports', 'require'] } })
With this the plugin will not mangle any occurrence of ?$super?, ?$?, ?exports? or ?require?.
ngAnnotatePlugin
new ngAnnotatePlugin([options]);
Runs the ng-annotate pre-minimizer to insert AngularJS dependency injection annotations.
CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin(options)
-
options.name
oroptions.names
(string|string[]
): The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk. If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name. If omitted andoptions.async
oroptions.children
is set all chunks are used, otherwiseoptions.filename
is used as chunk name. -
options.filename
(string
): The filename template for the commons chunk. Can contain the same placeholder asoutput.filename
. If omitted the original filename is not modified (usuallyoutput.filename
oroutput.chunkFilename
. -
options.minChunks
(number|Infinity|function(module, count) -> boolean
): The minimum number of chunks which need to contain a module before it?s moved into the commons chunk. The number must be greater than or equal 2 and lower than or equal to the number of chunks. PassingInfinity
just creates the commons chunk, but moves no modules into it. By providing afunction
you can add custom logic. (Defaults to the number of chunks) -
options.chunks
(string[]`): Select the source chunks by chunk names. The chunk must be a child of the commons chunk. If omitted all entry chunks are selected. -
options.children
(boolean
): Iftrue
all children of the commons chunk are selected -
options.async
(boolean
): Iftrue
a new async commons chunk is created as child ofoptions.name
and sibling ofoptions.chunks
. It is loaded in parallel withoptions.chunks
. -
options.minSize
(number
): Minimum size of all common module before a commons chunk is created.
Examples:
1. Commons chunk for entries
Generate an extra chunk, which contains common modules shared between entry points.
new CommonsChunkPlugin({ name: "commons", // (the commons chunk name) filename: "commons.js", // (the filename of the commons chunk) // minChunks: 3, // (Modules must be shared between 3 entries) // chunks: ["pageA", "pageB"], // (Only use these entries) })
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>
2. Explicit vendor chunk
Split your code into vendor and application.
entry: { vendor: ["jquery", "other-lib"], app: "./entry" } new CommonsChunkPlugin({ name: "vendor", // filename: "vendor.js" // (Give the chunk a different name) minChunks: Infinity, // (with more entries, this ensures that no other module // goes into the vendor chunk) })
<script src="vendor.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
Hint: In combination with long term caching you may need to use this plugin to avoid that the vendor chunk changes. You should also use records to ensure stable module ids.
3. Move common modules into the parent chunk
With Code Splitting multiple child chunks of a chunk can have common modules. You can move these common modules into the parent (This reduces overall size, but has a negative effect on the initial load time. It can be useful if it is expected that a user need to download many sibling chunks).
new CommonsChunkPlugin({ // names: ["app", "subPageA"] // (choose the chunks, or omit for all chunks) children: true, // (select all children of chosen chunks) // minChunks: 3, // (3 children must share the module before it's moved) })
4. Extra async commons chunk
Similar to 3., but instead of moving common modules into the parent (which increases initial load time) a new async-loaded additional commons chunk is used. This is automatically downloaded in parallel when the additional chunk is downloaded.
new CommonsChunkPlugin({ // names: ["app", "subPageA"] // (choose the chunks, or omit for all chunks) children: true, // (use all children of the chunk) async: true, // (create an async commons chunk) // minChunks: 3, // (3 children must share the module before it's separated) })
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.
DllPlugin
Output ?dll? bundles. Dll bundles doesn?t execute any of your module?s code. They only include modules. A dll bundle exports a function which can be used to ?require? modules by id (the internal require function). In addition to that a manifest json file is written to a specified location which contains mappings from real request to module id.
Combine this plugins with output.library
option to expose the dll function i. e. into the global scope.
new DllPlugin({ path: path.join(__dirname, "manifest.json"), name: "[name]_[hash]", context: __dirname })
-
path
: absolute path to the manifest json file (output) -
name
: name of the exposed dll function (keep consistent withoutput.library
) -
context
(optional): context of requests in the manifest file, defaults to the webpack context
DllReferencePlugin
References a dll function which is expected to be available. A manifest file can be used to map names to module ids accessible by this dll function.
Can be used to consume a dll bundle + manifest created by the DllPlugin
.
Can be used in two different modes:
Scoped mode
The content of the dll is accessible under a module prefix. i. e. with scope = "xyz"
a file abc
in the dll can be access via require("xyz/abc")
.
Mapped mode
The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead. Note: because this happens after resolving every file in the dll must be also available for the dll user at the same path. i. e. if the dll contains jquery
and the file abc
, require("jquery")
and require("./abc")
will be used from the dll.
new DllReferencePlugin({ context: __dirname, scope: "xyz", manifest: require("./manifest.json"), name: "./my-dll.js", sourceType: "commonsjs2", content: { ... } })
-
context
: (absolute path) context of requests in the manifest (or content property) -
scope
(optional): prefix which is used for accessing the content of the dll -
minifest
(object): an object containingcontent
andname
-
name
(optional): the name where the dll is exposed (defaults tomanifest.name
) (see alsoexternals
) -
sourceType
(optional): the type how the dll is exposed (defaults to"var"
) (see alsoexternals
) -
content
(optional): the mappings from request to module id (defaults tomanifest.content
)
Using dlls via <script>
tags
Dll bundle: output.library = "[name]_[hash]"
output.libraryTarget = "var"
DllPlugin.name = "[name]_[hash]"
Dll consumer: DllReferencePlugin.sourceType = "var"
Using dlls via node.js
Dll bundle: output.libraryTarget = "commonjs2"
Dll consumer: DllReferencePlugin.sourceType = "commonjs2"
DllReferencePlugin.name = "./path/to/dll.js"
AppCachePlugin
Generates a HTML5 Application Cache manifest
OfflinePlugin
Plugin which brings offline support into your project. It generates ServiceWorker
based on output files and chosen update strategy. AppCache
is used as a fallback when ServiceWorker
is not available.
module styles
LabeledModulesPlugin
new webpack.dependencies.LabeledModulesPlugin()
Support Labeled Modules.
ComponentPlugin
Use component with webpack. This project has been deprecated.
AngularPlugin
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"
RewirePlugin
Use rewire in webpack.
NgRequirePlugin
Automatically require AngularJS modules without explicitly write require
statement.
{ plugins: [ new ngRequirePlugin(['file path list for your angular modules. eg: src/**/*.js']) ] }
localization
I18nPlugin
new I18nPlugin(translations: Object, fnName = "__": String)
Create bundles with translations baked in. Then you can serve the translated bundle to your clients.
debugging
SourceMapDevToolPlugin
new webpack.SourceMapDevToolPlugin({ // asset matching test: string | RegExp | Array, include: string | RegExp | Array, exclude: string | RegExp | Array, // file and reference filename: string, append: false | string, // sources naming moduleFilenameTemplate: string, fallbackModuleFilenameTemplate: string, // quality/performance module: bool, columns: bool, lineToLine: bool | object })
Adds SourceMaps for assets.
test
, include
and exclude
are used to determine which assets should be processed. Each one can be a RegExp (asset filename is matched), a string (asset filename need to start with this string) or a Array of those (any of them need to be matched). test
defaults to .js
files if omitted.
filename
defines the output filename of the SourceMap. If no value is provided the SourceMap is inlined.
append
is appended to the original asset. Usually the #sourceMappingURL
comment. [url]
is replaced with a URL to the SourceMap file. false
disables the appending.
moduleFilenameTemplate
and fallbackModuleFilenameTemplate
see output.devtoolModuleFilenameTemplate
.
module
(defaults to true
) When false
loaders do not generate SourceMaps and the transformed code is used as source instead.
columns
(defaults to true
) When false
column mappings in SorceMaps are ignored and a faster SourceMap implementation is used.
lineToLine
(an object {test, include, exclude}
which is matched against modules) matched modules uses simple (faster) line to line source mappings.
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 theHotModuleReplacementPlugin
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. If you are using the CLI, the webpack process will not exit with an error code by enabling this plugin. If you want webpack to ?fail? when using the CLI, please check out the bail
option.
ProgressPlugin
new webpack.ProgressPlugin(function handler(percentage, msg) {/* ... */})
Hook into the compiler to extract progress information. The handler
must have the signature function(percentage, message)
. It?s called with 0 <= percentage <= 1
. percentage == 0
indicates the start. percentage == 1
indicates the end.
WatchIgnorePlugin
new webpack.WatchIgnorePlugin(paths)
Does not watch specified files matching provided paths or RegExps.
-
paths
(array) an array of RegExps or absolute paths to directories or files to test against
S3Plugin
new S3Plugin({ exclude: RegExp, s3Options: { accessKeyId: string, secretAccessKey: string, region: string }, s3UploadOptions: { Bucket: string }, cdnizerOptions: { defaultCDNBase: string } })
Uploads your content to s3. Can also run your html files through cdnizer to change the url to match
Please login to continue.