plugin是另一個擴展webpack能力的方式，plugin的功能范圍更廣。plugin的存在可以看成是為了實現(xiàn)那些loader實現(xiàn)不了或不合適在loader中實現(xiàn)的功能。如自動生成項目HTML頁面（HtmlWebpackPlugin）、向構建過程注入環(huán)境變量（EnvironmentPlugin）、向塊（chunk）的結果文件中添加注釋信息（BannerPlugin）等。
　　webpack內(nèi)置了一些常用的plugin，如EnvironmentPlugin及BannerPlulgin，更多第三方的plugin可以通過安裝npm包的形式引入，如HtmlWebpackPlugin對應的npm包是html-webpack-plugin。

• HtmlWebpackPlugin
  　　在前面的Hello world示例中，我們看到，因為邏輯均實現(xiàn)在JavaScript中，頁面（index.html）的實現(xiàn)中基本沒有邏輯，除了提供一個幾乎為空的HTML結構外，引入了將要被構建生成的結果文件bundle.js。
  　　一方面，bundle.js是在webpack.config.js中配置的值，取固定值不方便維護；另一方面，為了充分利用瀏覽器緩存，提高頁面加載速度，生產(chǎn)環(huán)境中常常會向靜態(tài)文件的文件名添加MD5戳，即使用bundle_[hash].js而不是bundle.js，這里的[hash]會在構建時被該chunk內(nèi)容的MD5結果替換，以實現(xiàn)內(nèi)容不變則文件名不變。
  　　在這樣的情況下，在HTML頁面中給定結果文件就變得不太現(xiàn)實。而HtmlWebpackPlugin正是為解決這一問題而生。

HtmlWebpackPlugin會自動生成一個幾乎為空的HTML頁面，并向其中注入構建的結果文件路徑，即使路徑中包含動態(tài)內(nèi)容，如MD5戳，也能夠完美處理。

• 安裝plugin
  對于內(nèi)置的plugin，可以直接使用：

var webpack = require('webpack');
webpack.BannerPlugin;  //這樣就可以直接獲取BannerPlugin

HtmlWebpackPlulgin并非內(nèi)置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'
        })
    ]
};

我們創(chuàng)造了一個HtmlWebpackPlugin實例，傳入了{title: 'use plugin'}，告訴HtmlWebpackPlugin給生成的HTML頁面設置<title>內(nèi)容為use plugin。
原來的index.html可以刪除了。構建完成后，插件會自動生成index.html。