list of plugins
new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)Replace resources that match resourceRegExp with newResource. If newResource is relative, it is resolved relative to the previous resource.
If newResource is a function, it is expected to overwrite the 'request' attribute of the supplied object.
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 resolved relative to the previous resource.
If newContentResource is a function, it is expected to overwrite the 'request' attribute of the supplied object.
new webpack.IgnorePlugin(requestRegExp, [contextRegExp])Don't generate modules for requests matching the provided RegExp.
-
requestRegExpA RegExp to test the request against. -
contextRegExp(optional) A RegExp to test the context (directory) against.
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 an absolute path to a directory
request a request string for a normal module
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"])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'])
])This plugin will allow you to reference environment variables through process.env
new webpack.EnvironmentPlugin([
"NODE_ENV"
])In your code:
var env = process.env.NODE_ENV;
new DotenvWebpack([options]);Wraps dotenv to include environment variables in your bundle. Only includes explicitly defined variables in the final bundle.
new RawBundlerPlugin({
bundles: [ "vendor.js" ],
"vendor.js": [ 'js/*.js' ]
})Merges your files, unedited, into a single file. See repo for a full list of options.
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.
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 instances. They won't be one instance after deduplication.
Note: Don't use it in watch mode. Only for production builds.
Note: DedupePlugin has been removed since Webpack 2. Using this plugin will throw an error.
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)
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
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 total file size and is recommended.
preferEntry (boolean) give entry chunks higher priority. This makes entry chunks smaller but increases the overall size. (recommended)
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
}
})UglifyJS options:
-
compress(boolean|object): options for UglifyJS compression, which is enabled by default - see theCompressorsource for options and defaults.Use
compress: falseto explicitly disable compression. -
mangle(boolean|object): options for UglifyJS variable name mangling, which is enabled by default - see_default_mangler_optionsin UglifyJS' source for options and defaults.Use
mangle: falseto explicitly disable mangling. -
mangle.props(boolean|object): passingtrueor an object enables and provides options for UglifyJS property mangling - see UglifyJS documentation formanglePropertiesfor options.Note: the UglifyJS docs warn that you will probably break your source if you use property mangling, so if you aren't sure why you'd need this feature, you most likely shouldn't be using it!
-
output: an object providing options for UglifyJS'OutputStream- see theOutputStreamsource for options and defaults.
Additional options:
-
beautify(boolean): set totrueto enable UglifyJS output beautification.If
beautifyconfig is also provided in anoutputobject, it will override this configuration. -
comments(boolean|RegExp|function(astNode, comment) -> boolean): configure preservation of comments in output.Defaults to preserving comments containing
/*!,/**!,@preserveor@license.If
commentsconfig is also provided in anoutputobject, it will override this configuration. -
sourceMap(boolean): use SourceMaps to map error message locations to modules. This slows down the compilation. (default:true) -
test,include,exclude(RegExp|Array<RegExp>): configure filtering of processed files (default:test: /\.js($|\?)/i)
Mangling names configuration
A specific configuration is about mangling variable names. By default, the mangle option is on. 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.
new ngAnnotatePlugin([options]);Runs the ng-annotate pre-minimizer to insert AngularJS dependency injection annotations.
new webpack.optimize.CommonsChunkPlugin(options)-
options.nameoroptions.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.asyncoroptions.childrenis set all chunks are used, otherwiseoptions.filenameis 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.filenameoroutput.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. PassingInfinityjust creates the commons chunk but moves no modules into it. By providing afunctionyou 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): Iftrueall children of the commons chunk are selected -
options.async(boolean|string): Iftruea new async commons chunk is created as a child ofoptions.nameand sibling ofoptions.chunks. It is loaded in parallel withoptions.chunks. It is possible to change the name of the output file by providing the desired string instead oftrue. -
options.minSize(number): Minimum size of all common module before a commons chunk is created.
Examples:
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>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.
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 needs 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)
})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)
})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 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 minimally required size reduction for chunk merging. Defaults to 1.5 which means that the total size needs to be reduced 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 a normal chunk.
Output "dll" bundles. Dll bundles don'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 plugin 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
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 -
manifest(object): an object containingcontentandname -
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)
Dll bundle: output.library = "[name]_[hash]" output.libraryTarget = "var" DllPlugin.name = "[name]_[hash]"
Dll consumer: DllReferencePlugin.sourceType = "var"
Dll bundle: output.libraryTarget = "commonjs2"
Dll consumer: DllReferencePlugin.sourceType = "commonjs2" DllReferencePlugin.name = "./path/to/dll.js"
Generates a HTML5 Application Cache manifest
Plugin which brings offline support to your project. It generates ServiceWorker based on output files and chosen update strategy. AppCache is used as a fallback when ServiceWorker is not available.
Use a service worker to cache all your bundles' emitted assets. This plugin will generate a service worker file using sw-precache then add it to your build directory. You can optionally pass your own sw-precache config options.
Compresses and optimizes your images using Imagemin. Unlike image-webpack-loader this will also optimize images from plugins like favicons-webpack-plugin.
new webpack.dependencies.LabeledModulesPlugin()Support Labeled Modules.
Use angular.js modules with webpack.
new webpack.DefinePlugin(definitions)The DefinePlugin allows you to create global constants which can be configured at compile time. This can be very useful for allowing different behavior between development builds and release builds. For example, you might use a global constant to determine whether logging takes place; perhaps you perform logging in your development build but not in the release build. That's the sort of scenario the DefinePlugin facilitates.
Example:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
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
typeofto 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 (!PRODUCTION)
console.log('Debug info')
if (PRODUCTION)
console.log('Production log')After passing through webpack with no minification results in:
if (!true)
console.log('Debug info')
if (true)
console.log('Production log')and then after a minification pass results in:
console.log('Production log')new webpack.ProvidePlugin(definitions)Automatically loaded modules. Module (value) is loaded when the identifier (key) is used as a 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.
Automatically require AngularJS modules without explicitly write require statement.
{
plugins: [
new ngRequirePlugin(['file path list for your angular modules. eg: src/**/*.js'])
]
}
new I18nPlugin(translations: Object, fnName = "__": String)Create bundles with translations baked in. Then you can serve the translated bundle to your clients.
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 an 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 SourceMaps 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.
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.
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 theHotModuleReplacementPluginexport the same stuff.
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.
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.
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
HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({ title: 'Webpack App' })Generates a solid base html page for your web application with all your webpack generated CSS and js files built in. Supports custom templates, favicon, html-minifications and more:
Provide a series of paths to be rendered by executing your Webpack-compiled render function, allowing universal rendering techniques to be used at build time.
var StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
var paths = [ '/', '/blog/', '/blog/hello-world/', ... ];
entry: {
'static-render': './static-render.js'
},
output: {
filename: 'static-render.js',
path: 'dist',
/* You must compile to UMD or CommonJS
* so it can be required in a Node context: */
libraryTarget: 'umd'
},
plugins: [
new StaticSiteGeneratorPlugin('static-render', paths)
]
S3Plugin = require('webpack-s3-plugin')
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
var BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin')
{
plugins: [
new BellOnBundlerErrorPlugin()
]
}Get a notification of bundler build errors. On that occasion, a bell character will be written to STDERR output.
// webpack.config.js
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
module.exports = {
// ... snip ...
plugins: [
new WebpackBuildNotifierPlugin({
title: "My Project Webpack Build",
logo: path.resolve("./img/favicon.png"),
suppressSuccess: true
})
],
// ... snip ...
}A plugin which displays OS-level notifications for Webpack build errors and warnings.
const WebpackShellPlugin = require('webpack-shell-plugin');
var plugins = [];
{
plugins: [
new WebpackShellPlugin({
onBuildStart: ['echo "Starting"'],
onBuildEnd: ['python pi.py', 'node openBrowser.js', 'haxe game.hx && ssh -i /myPems/key.pem [email protected]']
})
]
}Fires shell commands before and after webpack builds. Great for reporting tools, testing, or opening your browser for development. Learn more.
In the entry point where the main AngularJS module is defined:
var angularResourceUtil = require('webpack-angular-resource-plugin');
Require all css files under the current directory and its subdirectories:
var styleContext = require.context(".", true, /.css$/);
angularResourceUtil.requireAll(styleContext);
Define the main Angular module. Also, require all files whose name end with .controller.js which contain submodules. Notice that the module names are returned as an array and passed to the factory method as dependencies of the main module:
var controllerContext = require.context('.', true, /\.controller\.js$/)
module.exports = {
default:angular.module('app', angularResourceUtil.requireAll(controllerContext))
}Require all AngularJS modules for a Webpack project and return an array of the module names that can be used as dependencies of the main module. Can also batch require other resources such as style sheets and images. Learn more.
const WebpackBrowserPlugin = require('webpack-browser-plugin');
var plugins = [];
{
plugins: [
new WebpackBrowserPlugin();
]
}Automatically opens a browser to your application after webpack or webpack-dev-server completes. If webpack is used, browser-sync is used to launch your build. Learn more.
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
var plugins = [];
{
plugins: [
new FaviconsWebpackPlugin('my-logo.png')
]
}Automatically generates over 30 favicons (configurable) for Android, iOS, and the different desktop browsers from one source png. Integrates well with the html-webpack-plugin.
const path = require('path');
const WebpackPluginGraphqlSchemaHot = require('webpack-plugin-graphql-schema-hot');
var plugins = [];
{
plugins: [
new WebpackPluginGraphqlSchemaHot({
schemaPath: path.resolve(__dirname, '../schema/index.js'),
output: {
json: path.resolve(__dirname, '../build/schema.graphql.json'),
txt: path.resolve(__dirname, '../build/schema.graphql.txt'),
},
runOnStart: true,
verbose: true,
hideErrors: false,
}),
]
}This plugin tracks changes in your GraphQL Schema and generates its introspection in json and txt formats.
const filewatcherPlugin = require('filewatcher-webpack-plugin');
var plugins = [];
{
plugins: [
new filewatcherPlugin({watchFileRegex: ['../scriptFolder/**/*.js', '../stylesheets/**/*.css']})
]
}This plugin watches files/folders not under Webpack watch. Accepts glob pattern. Turbo powered by chokidar. Here we are watching "all files contained in folder named scriptFolder and stylesheets (or any nested folder inside it) having extension .js or .css respectively"..
const NodeSecurityPlugin = require('webpack-nodesecurity-plugin');
var plugins = [];
{
plugins: [
new NodeSecurityPlugin()
]
}Webpack plugin that runs the Node Security Platform audit on your package.json, package-lock.json or npm-shrinkwrap.json.
It is a wrapper for the nodesecurity/nsp package.