-
Notifications
You must be signed in to change notification settings - Fork 127
webpack plugins
Replace resources that matches resourceRegExp with newResource.
Replaces the default regExp generated by parsing with newContextRegExp if the resource (directory) matches resourceRegExp.
Don't generate modules for requests matching the provided RegExp.
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
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.
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)
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)
Merge small chunks that are lower than this min size (in chars). Size is approximated.
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)
Minimize all javascript output of chunks. Loaders are switched into minimizing mode. You can pass an object containing UglifyJs options.
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, <= entry points count.
Use component with webpack.
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");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.
Create bundles with translations baked in. Then you can serve the translated bundle to your clients.
For a list of plugins used by webpack internally see internal webpack plugins
webpack 👍