除了 loader 外儿礼，plugin 是另一個擴(kuò)展 webpack 能力的方式衡便。于 loader 專注于處理資源內(nèi)容的轉(zhuǎn)換不同稚瘾，plugin 的功能范圍更廣慌盯，更為靈活強(qiáng)大周霉。
plugin 的存在是為了實現(xiàn)那些 loader 實現(xiàn)不了或者不適合在 loader 中實現(xiàn)的功能。如：
- 自動生成項目的 html 頁面 （HtmlWebpackPlugin）亚皂。
- 向構(gòu)建過程中注入環(huán)境變量（EnvironmentPlugin---內(nèi)置）俱箱。
- 向塊（Chunk）的結(jié)果文件中添加注釋信息（BannerPlugin---內(nèi)置）。
在 helloworld 例子中灭必，所有邏輯均實現(xiàn)在 JavaScript 中狞谱，頁面 index.html 基本沒有邏輯，除了一個幾乎為空的 HTML 結(jié)構(gòu)外禁漓，引入了一個將要被構(gòu)建生成的結(jié)果文件 bundle.js 跟衅。
- bundle.js 是在 webpack.config.js 中 配置的 output.filename 的值，在這里取固定值不方便維護(hù)播歼；
- 為了充分利用瀏覽器緩存伶跷，提高頁面加載速度，在生產(chǎn)環(huán)境中常常會向靜態(tài)文件的文件名添加 MD5 戳秘狞，即是 bundle_[hash].js 而不是 bundle.js叭莫，這里的 [hash] 值會在構(gòu)建時被該 chunk 內(nèi)容的 MD5 結(jié)果替換，以實現(xiàn)文件內(nèi)容不變則文件名不變烁试，內(nèi)容改變導(dǎo)致文件名改變雇初。
在這樣的情況下，在 HTML 頁面中給定結(jié)果文件的路徑就變得不太現(xiàn)實减响。HtmlWebpackPlugin 正是為解決這一問題而生靖诗，他會自動生成一個幾乎為空的 HTML 頁面，并向其中注入構(gòu)建的結(jié)果文件路徑支示，即使路徑中包含動態(tài)內(nèi)容刊橘，如 MD5 戳，也能夠完美處理悼院。
安裝 Plugin
webpack 一些內(nèi)置 Plugin 不需要額外安裝伤为，直接使用。如：
var webpack = require("webpack");
webpack.BannerPlugin; // 這樣可以直接獲取 BannerPlugin
HtmlWebpackPlugin 不是內(nèi)置的据途，它在 npm 包 html-webpack-plugin 中實現(xiàn)绞愚，需要安裝。
npm i html-webpack-plugin --save-dev
// npm i html-webpack-plugin@1.7.0 --save-dev --安裝指定版本
執(zhí)行 webpack 報如下錯誤：
ERROR in Path must be a string. Received undefined
- 原因是 node 的版本號是 v6.10.1颖医，如果說5及其以下沒有問題
- 還有一種解決辦法是在 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"} 參數(shù)對應(yīng) index.html 中 title 的值
