插件

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

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

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

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

  1. var webpack = require('webpack')
  3. module.exports = {
  4.   entry: './entry.js',
  5.   output: {
  6.     path: __dirname,
  7.     filename: 'bundle.js'
  8.   },
  9.   module: {
  10.     loaders: [
  11.       {test: /\.css$/, loader: 'style-loader!css-loader'}
  12.     ]
  13.   },
  14.   plugins: [
  15.     new webpack.BannerPlugin('This file is created by zhaoda')
  16.   ]
  17. }

然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

  1. /*! This file is created by zhaoda */
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/  // The module cache
  4. /******/  var installedModules = {};
  5. // 后面代码省略