The plugins
option is used to customize the webpack build process in a variety of ways. webpack comes with a variety built-in plugins available under webpack.[plugin-name]
. See this page for a list of plugins and documentation but note that there are a lot more out in the community.
Note: This page only discusses using plugins, however if you are interested in writing your own please visit Writing a Plugin.
plugins
array
A list of webpack plugins. For example, when multiple bundles share some of the same dependencies, the CommonsChunkPlugin
could be useful to extract those dependencies into a shared bundle to avoid duplication. This could be added like so:
module.exports = { //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ //... }) ] };
A more complex example, using multiple plugins, might look something like this:
var webpack = require('webpack'); // importing plugins that do not come by default in webpack var ExtractTextPlugin = require('extract-text-webpack-plugin'); var DashboardPlugin = require('webpack-dashboard/plugin'); // adding plugins to your configuration module.exports = { //... plugins: [ // build optimization plugins new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor-[hash].min.js', }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: false, } }), new ExtractTextPlugin({ filename: 'build.min.css', allChunks: true, }), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // compile time plugins new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', }), // webpack-dev-server enhancement plugins new DashboardPlugin(), new webpack.HotModuleReplacementPlugin(), ] };
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/plugins