使用plugin

plugin是另一个扩展webpack能力的方式，plugin的功能范围更广。plugin的存在可以看成是为了实现那些loader实现不了或不合适在loader中实现的功能。如自动生成项目HTML页面（HtmlWebpackPlugin）、向构建过程注入环境变量（EnvironmentPlugin）、向块（chunk）的结果文件中添加注释信息（BannerPlugin）等。
　　webpack内置了一些常用的plugin，如EnvironmentPlugin及BannerPlulgin，更多第三方的plugin可以通过安装npm包的形式引入，如HtmlWebpackPlugin对应的npm包是html-webpack-plugin。

---

• HtmlWebpackPlugin
  　　在前面的Hello world示例中，我们看到，因为逻辑均实现在JavaScript中，页面（index.html）的实现中基本没有逻辑，除了提供一个几乎为空的HTML结构外，引入了将要被构建生成的结果文件bundle.js。
  　　一方面，bundle.js是在webpack.config.js中配置的值，取固定值不方便维护；另一方面，为了充分利用浏览器缓存，提高页面加载速度，生产环境中常常会向静态文件的文件名添加MD5戳，即使用bundle_[hash].js而不是bundle.js，这里的[hash]会在构建时被该chunk内容的MD5结果替换，以实现内容不变则文件名不变。
  　　在这样的情况下，在HTML页面中给定结果文件就变得不太现实。而HtmlWebpackPlugin正是为解决这一问题而生。

HtmlWebpackPlugin会自动生成一个几乎为空的HTML页面，并向其中注入构建的结果文件路径，即使路径中包含动态内容，如MD5戳，也能够完美处理。

• 安装plugin
  对于内置的plugin，可以直接使用：

var webpack = require('webpack');
webpack.BannerPlugin;  //这样就可以直接获取BannerPlugin

HtmlWebpackPlulgin并非内置plugin，需要先安装：

npm i html-webpack-plugin@1.7.0 --save-dev

完了后，在webpack.config.js中就可以获取这个插件了：

var HtmlWebpackPlugin = require('html-webpack-plugin');

• 配置plugin

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, 'index'),
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loaders: ['style', 'css']
            }
        ]
    },
    plugins: [  // 配置plugin
        new HtmlWebpackPlugin({
            title: 'use plugin'
        })
    ]
};

我们创造了一个HtmlWebpackPlugin实例，传入了{title: 'use plugin'}，告诉HtmlWebpackPlugin给生成的HTML页面设置<title>内容为use plugin。
原来的index.html可以删除了。构建完成后，插件会自动生成index.html。