一、HtmlWebpackPlugin运用：
npm install html-webpack-plugin --save-dev诠释：这个插件是简化建立天生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的标签引入到body中！
假如你运用了ExtractTextPlugin来提取css，将经由过程link在head中引入！
平常设置：
title: 用于天生的HTML文档的题目,也就是html，head中`<title>ceshi</title>`
filename: 天生的文件名，default index.html
template: 模版（填写相对途径，与设置文件的相对途径，比方：'./index.html'
hash: 增添hash值，使每次天生的都是唯一的不反复的
二、ExtractTextWebpackPlugin 星散我们的款式文件，比方css,sass,less
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中的参数设置有：（string/object） id: 插件实例的唯一标识，默许情况下是自动天生的，不发起设置
filename: 天生文件的称号，能够包括[name], [id] and [contenthash]
allChunks：(bollean) 从一切附加块中提取（默许情况下，它仅从初始块中提取）
rules内里的参数设置有：（loader | object) options.use :
{String}/{Array}/{Object} 运用的编译loader options.fallback :
{String}/{Array}/{Object} 当css没有被提取的时刻,能够看成保守用 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
]
};三、DefinePlugin 定义变量
许可我们建立可在编译时设置的全局常量，这对与须要天真设置的项目而言异常的主要，举个例子：
开辟中我们须要devtool来检察redux树中stroe中的变量，然则临盆环境中不须要，那末就能够如许定义：
const nodeEnv = process.env.NODE_ENV || 'development';
const isPro = nodeEnv === 'production';
new webpack.DefinePlugin({
"__dev__": JSON.stringify(isPro)
})那末在开辟环境中__dev__为false，
打包的时刻能够在CLI中输入NODE_ENV=production 如许__dev__就为true;
四、ProvidePlugin 供应识别码
浅显点讲就是运用一些字符替代庞杂的字符，比方我想用 $ 代表 jquery, 那末就能够运用这个插件，或着我想用 ‘av’ 代表 ‘./ateon/values’ 这个途径，也能够运用这个插件。
基础用法：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'av' : './ateon/values'
})在模块中运用，import lives from 'av' === import lives from './ateon/values'
五、clean-webpack-plugin 消灭你的build目次
基础用法：
const CleanWebpackPlugin = require('clean-webpack-plugin')
// webpack config
{
plugins: [
new CleanWebpackPlugin(paths [, {options}])
]
}[, {options}]为可选参数
`path` An [array] of string
options 参数
{
root: __dirname,默许根目次，也就是你的package的途径（绝对途径）
verbose: true, 在控制台console日记
dry: false, 默许为false，删除一切的文件， 为true时，模仿删除，并不删除文件
watch: false, 默许false， 为true时删除一切的编译文件
exclude: [ 'files', 'to', 'ignore' ]
}平常这一项我们都运用默许值，不去设置，只须要设置path就能够了！
总结，经常使用的就是这些了，后续还会在连续的到场。。。其他相干插件！
再次跟新一个插件，也是营业需求，将公用代码块自力打包，（六）
六、CommonsChunkPlugin 公用模块自力打包
说到这个，能够说很多用webpack项目的都邑运用到这一插件，能够提拔些许编译的速率。直接上demo吧！起首假设是一个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是一个数组，vendor对应的是entry上面的键值，必需一致，打包后就会在cli(命令行)中看到多一个vendor.js文件，假如启动文件必需先引入这个js才行，不然会报错！
那末这个manifest是为了处理vendor再次编译的题目，假如只是写了names:vendor，你能够仔细检查vendor背面的hash值的变化，在热更新的时刻，每次变动js文件，都邑从新编译，vendor也会从新编译(看看hash就知道了)，按理说应该是不会变动了，由于我们就是用这个插件去处理公用代码库不必每次都打包，提拔编译速率的！处理的计划就是加一个这个，现在我也在找缘由，找到了会实时过来更新的！
这个另有其他的参数设置，这里轻微诠释一下参数的设置
{
name: string,//or names: Array 对应entry上的键值
filename: string 天生文件的名字，假如没有默许为输出文件名
minChunks: number|Infinity 模块被援用的次数若干才会被自力打包>=2
chunks: 示意须要在哪些chunk（也能够理解为webpack设置中entry的每一项）里寻觅大众代码举行打包。不设置此参数则默许提取局限为一切的chunk
}平常设置选项就是上面这些，
