WebPack Plugins

plugins 选项用于以各种方式 webpack 构建过程。webpack 附带了各种内置，可以通过 webpack.[plugin-name] 访问这些。请查看这个列表和对应文档，但请注意这只是其中一部分，社区中还有许多。

注意：本仅讨论使用，如果你有兴趣编写自己的，请访问编写。

plugins

array

webpack 列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于这些依赖到共享的 bundle 中，来避免重复打包。可以像这样：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    ...
  })
  ]

复杂示例，使用多个，可能看起来就像这样：

var webpack = require('webpack');
// 导入非 webpack 认
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// 在配置中
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)
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 强化
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]