2.2.5 使用 plugin

除了 loader 外，plugin 是另一个扩展 webpack 能力的方式。于 loader 专注于处理资源内容的转换不同，plugin 的功能范围更广，更为灵活强大。

plugin 的存在是为了实现那些 loader 实现不了或者不适合在 loader 中实现的功能。如：

1. 自动生成项目的 html 页面 （HtmlWebpackPlugin）。
2. 向构建过程中注入环境变量（EnvironmentPlugin---内置）。
3. 向块（Chunk）的结果文件中添加注释信息（BannerPlugin---内置）。

在 helloworld 例子中，所有逻辑均实现在 JavaScript 中，页面 index.html 基本没有逻辑，除了一个几乎为空的 HTML 结构外，引入了一个将要被构建生成的结果文件 bundle.js 。

1. bundle.js 是在 webpack.config.js 中 配置的 output.filename 的值，在这里取固定值不方便维护；
2. 为了充分利用浏览器缓存，提高页面加载速度，在生产环境中常常会向静态文件的文件名添加 MD5 戳，即是 bundle_[hash].js 而不是 bundle.js，这里的 [hash] 值会在构建时被该 chunk 内容的 MD5 结果替换，以实现文件内容不变则文件名不变，内容改变导致文件名改变。

在这样的情况下，在 HTML 页面中给定结果文件的路径就变得不太现实。HtmlWebpackPlugin 正是为解决这一问题而生，他会自动生成一个几乎为空的 HTML 页面，并向其中注入构建的结果文件路径，即使路径中包含动态内容，如 MD5 戳，也能够完美处理。

安装 Plugin

webpack 一些内置 Plugin 不需要额外安装，直接使用。如：

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

HtmlWebpackPlugin 不是内置的，它在 npm 包 html-webpack-plugin 中实现，需要安装。

npm i html-webpack-plugin --save-dev
// npm i html-webpack-plugin@1.7.0 --save-dev --安装指定版本

执行 webpack 报如下错误：

ERROR in Path must be a string. Received undefined

1. 原因是 node 的版本号是 v6.10.1，如果说5及其以下没有问题
2. 还有一种解决办法是在 webpack.config.js 中配置 output.publicPath 的值，没有配置 CDN 的话可以为空

整个配置如下：

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.join(__dirname, "index"),
  output: {
    filename: "bundle_[hash].js",
    path: __dirname,
    publicPath: ""
  },
  module: {
    loaders: [
        {
        test: /\.css$/,
        loaders: ["style-loader", "css-loader"]
      }
    ]
  },

  plugins: [
    // new webpack.BannerPlugin('This file is created by zhaoda')
    new HtmlWebpackPlugin({title: "use plugin"})
  ]
};

{title: "use plugin"} 参数对应 index.html 中 title 的值