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

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

默認生成的是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: 模版（填寫相對路徑，與配置文件的相對路徑，例如："./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: 插件實例的唯一標(biāo)識，默認情況下是自動生成的，不建議設(shè)置
filename: 生成文件的名稱，可以包含[name], [id] and [contenthash]
allChunks：(bollean) 從所有附加塊中提?。J情況下，它僅從初始塊中提?。?/p>

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

如果想生成多個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,  //兩個實例
    extractLESS
  ]
};

允許我們創(chuàng)建可在編譯時配置的全局常量，這對與需要靈活配置的項目而言非常的重要，舉個例子：
開發(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，
打包的時候可以在CLI中輸入NODE_ENV=production 這樣__dev__就為true;

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

基本用法：

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,默認根目錄，也就是你的package的路徑（絕對路徑）
verbose: true, 在控制臺console日志
dry: false, 默認為false，刪除所有的文件， 為true時，模擬刪除，并不刪除文件
watch: false, 默認false， 為true時刪除所有的編譯文件
exclude: [ "files", "to", "ignore" ] 
}

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

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

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

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

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

將react和reactdom獨立打包到一個文件，配置如下：

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


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

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

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

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

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

一般配置選項就是上面這些，