插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 選項中指定。

Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件。

接下來，我們利用一個最簡單的 BannerPlugin 內(nèi)置插件來實踐插件的配置和運(yùn)行，這個插件的作用是給輸出的文件頭部添加注釋信息。

修改 webpack.config.js，添加 plugins：

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by zhaoda')
  ]
}

然后運(yùn)行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：

/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/  // The module cache
/******/  var installedModules = {};
// 后面代碼省略