npm install html-webpack-plugin --save-dev

解釋：這個(gè)插件是簡(jiǎn)化創(chuàng)建生成html（h5）文件用的，如果你引入的文件帶有hash值的話，這個(gè)尤為的有用，不需要手動(dòng)去更改引入的文件名！

默認(rèn)生成的是index.html,基本用法為：

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "index.js",
  output: {
    path: "dist",
    filename: "index_bundle.js"
  },
  plugins: [new HtmlWebpackPlugin()]
};

js通過script的標(biāo)簽引入到body中！
如果你使用了ExtractTextPlugin來提取css，將通過link在head中引入！

一般配置：

title: 用于生成的HTML文檔的標(biāo)題,也就是html，head中``
filename: 生成的文件名，default index.html
template: 模版（填寫相對(duì)路徑，與配置文件的相對(duì)路徑，例如："./index.html"
hash: 增加hash值，使每次生成的都是唯一的不重復(fù)的

npm install --save-dev extract-text-webpack-plugin

基本用法：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
     //輸出在根目錄上，也可以這樣寫css/styles.css
  ]
}

其中plugins中的參數(shù)配置有：（string/object） id: 插件實(shí)例的唯一標(biāo)識(shí)，默認(rèn)情況下是自動(dòng)生成的，不建議設(shè)置
filename: 生成文件的名稱，可以包含[name], [id] and [contenthash]
allChunks：(bollean) 從所有附加塊中提取（默認(rèn)情況下，它僅從初始?jí)K中提取）

rules里面的參數(shù)配置有：（loader | object) options.use :
{String}/{Array}/{Object} 使用的編譯loader options.fallback :
{String}/{Array}/{Object} 當(dāng)css沒有被提取的時(shí)候,可以當(dāng)作保守用 options.publicPath :
可以覆蓋output里的publickPath

如果想生成多個(gè)css文件的話，可以這樣寫:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new ExtractTextPlugin("css/[name]-one.css");
const extractLESS = new ExtractTextPlugin("css/[name]-two.css");

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: extractCSS.extract([ "css-loader", "postcss-loader" ])
      },
      {
        test: /.less$/i,
        use: extractLESS.extract([ "css-loader", "less-loader" ])
      },
    ]
  },
  plugins: [
    extractCSS,  //兩個(gè)實(shí)例
    extractLESS
  ]
};

允許我們創(chuàng)建可在編譯時(shí)配置的全局常量，這對(duì)與需要靈活配置的項(xiàng)目而言非常的重要，舉個(gè)例子：
開發(fā)中我們需要devtool來查看redux樹中stroe中的變量，但是生產(chǎn)環(huán)境中不需要，那么就可以這樣定義：

const nodeEnv = process.env.NODE_ENV || "development";
const isPro = nodeEnv === "production";
new webpack.DefinePlugin({
    "__dev__": JSON.stringify(isPro) 
})

那么在開發(fā)環(huán)境中__dev__為false，
打包的時(shí)候可以在CLI中輸入NODE_ENV=production 這樣__dev__就為true;

通俗點(diǎn)講就是使用一些字符代替復(fù)雜的字符，例如我想用 $ 代表 jquery, 那么就可以使用這個(gè)插件，或著我想用 "av" 代表 "./ateon/values" 這個(gè)路徑，也可以使用這個(gè)插件。

基本用法：

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "av" : "./ateon/values"
})

在模塊中使用，import lives from "av" === import lives from "./ateon/values"

基本用法：

const CleanWebpackPlugin = require("clean-webpack-plugin")

// webpack config
{
  plugins: [
    new CleanWebpackPlugin(paths [, {options}])
  ]
}

[, {options}]為可選參數(shù)
`path` An [array] of string
options 參數(shù)

{
root: __dirname,默認(rèn)根目錄，也就是你的package的路徑（絕對(duì)路徑）
verbose: true, 在控制臺(tái)console日志
dry: false, 默認(rèn)為false，刪除所有的文件， 為true時(shí)，模擬刪除，并不刪除文件
watch: false, 默認(rèn)false， 為true時(shí)刪除所有的編譯文件
exclude: [ "files", "to", "ignore" ] 
}

一般這一項(xiàng)我們都使用默認(rèn)值，不去設(shè)置，只需要設(shè)置path就可以了！

總結(jié)，常用的就是這些了，后續(xù)還會(huì)在陸續(xù)的加入。。。其他相關(guān)插件！

再次跟新一個(gè)插件，也是業(yè)務(wù)需求，將公用代碼塊獨(dú)立打包，（六）

說到這個(gè)，可以說很多用webpack項(xiàng)目的都會(huì)使用到這一插件，可以提升些許編譯的速度。直接上demo吧！首先假設(shè)是一個(gè)react-webpack項(xiàng)目，那必然每次新建js的時(shí)候都會(huì)

import React,{PropTypes} from "react";
import {ReactDOM} from "react-dom";

將react和reactdom獨(dú)立打包到一個(gè)文件，配置如下：

entry: {
      index: ‘main.js’,
      vendor : ["react", "react-dom"]  
},
output: {
    chunkFilename:"[name].[hash:8].js", //用hash解決緩存的問題，
}


plugins： [
new CommonsChunkPlugin({ //對(duì)指定的chunks進(jìn)行公共模塊的提取 多個(gè) html共用一個(gè)js文件(chunk)，可用CommonsChunkPlugin
        names: ["vendor", "manifest"],
}),
]

這個(gè)names是一個(gè)數(shù)組，vendor對(duì)應(yīng)的是entry上面的鍵值，必須一致，打包后就會(huì)在cli(命令行)中看到多一個(gè)vendor.js文件，如果啟動(dòng)文件必須先引入這個(gè)js才行，否則會(huì)報(bào)錯(cuò)！

那么這個(gè)manifest是為了解決vendor再次編譯的問題，如果只是寫了names:vendor，你可以仔細(xì)檢查vendor后面的hash值的變化，在熱更新的時(shí)候，每次更改js文件，都會(huì)重新編譯，vendor也會(huì)重新編譯(看看hash就知道了)，按理說應(yīng)該是不會(huì)更改了，因?yàn)槲覀兙褪怯眠@個(gè)插件去解決公用代碼庫(kù)不用每次都打包，提升編譯速度的！解決的方案就是加一個(gè)這個(gè)，目前我也在找原因，找到了會(huì)及時(shí)過來更新的！

這個(gè)還有其他的參數(shù)配置，這里稍微解釋一下參數(shù)的配置

{
name: string,//or   names: Array 對(duì)應(yīng)entry上的鍵值
filename: string    生成文件的名字，如果沒有默認(rèn)為輸出文件名
minChunks: number|Infinity  模塊被引用的次數(shù)多少才會(huì)被獨(dú)立打包>=2
chunks: 表示需要在哪些chunk（也可以理解為webpack配置中entry的每一項(xiàng)）里尋找公共代碼進(jìn)行打包。不設(shè)置此參數(shù)則默認(rèn)提取范圍為所有的chunk
}

一般配置選項(xiàng)就是上面這些，