官方解释

plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。

webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。

解析理解

Plugin 用于扩展 Webpack 功能，处理loader解决不了的事情，各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。

插件与loader区别

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。


属性介绍

  1. var webpack = require('webpack');
  2. // 导入非 webpack 自带默认插件
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin');
  4. var DashboardPlugin = require('webpack-dashboard/plugin');
  6. // 在配置中添加插件
  7. plugins: [
  8.   // 构建优化插件
  9.   new webpack.optimize.CommonsChunkPlugin({
  10.     name: 'vendor',
  11.     filename: 'vendor-[hash].min.js',
  12.   }),
  13.   new webpack.optimize.UglifyJsPlugin({
  14.     compress: {
  15.       warnings: false,
  16.       drop_console: false,
  17.     }
  18.   }),
  19.   new ExtractTextPlugin({
  20.     filename: 'build.min.css',
  21.     allChunks: true,
  22.   }),
  23.   new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  24.   // 编译时(compile time)插件
  25.   new webpack.DefinePlugin({
  26.     'process.env.NODE_ENV': '"production"',
  27.   }),
  28.   // webpack-dev-server 强化插件
  29.   new DashboardPlugin(),
  30.   new webpack.HotModuleReplacementPlugin(),
  31. ]

官方插件列表

https://www.webpackjs.com/plugins/