上一篇文章中我们学习了如何使用webpack.config.js配置文件，但是运行webpack命令打包过后由于目录的原因，我们需要手动修改目录或者移动文件。
那么这一章我们学习plugin插件的使用，它将极大地便利我们的工作。
html-webapck-plugin插件
首先，解决上一章留下的问题，我们通过plugin插件直接在打包的文件中生成html文件，直接打开便可看到效果。
// 安装html-webpack-plugin插件
npm install html-webpack-plugin --save-dev
//可能会warnning提示缺少其他的依赖，按照提示安装便可
修改我们的webpack.config.js文件:
//引入html-webpack-plugin
var htmlWebpackPlugin = require('html-webpack-plugin');
......省略内容跟上一篇章中一样
plugins: [
new htmlWebpackPlugin({
title: 'Hello,Plugin',
h1: 'use Plugin'
})
]
ProvidePlugin插件:
ProvidePlugin插件可以使用指定的indentifier去替代引入的module，全局有效。
//在上面webpack.config.js文件的基础上
plugins: [
...
new webpack.ProvidePlugin({
$ : 'jquery'
})
]
NoErrorsPlugin插件：
这个插件可以把Webpack编译过程中的的错误的日志省略掉，不包含在最终的发布版本中。
//同上的webpack.config.js基础
plugins:[
...
new webpack.NoErrorsPlugin()
]
IgnorePlugin插件：
这个插件可以指定打包是不处理某个模块。
//webpack.config.js同上
plugins: [
...
new webpack.IgnorePlugin(/\.XXX.js$/);
]
更多的插件介绍请查看官方文档：Webpack Plugins
配置relolve参数：
resolve.extensions: 自动拓展文件的后缀名，在使用require引入模块不用后缀名
resolve.alias: 模块别名的定义，抛弃地址定位直接使用别名
//在webpack.config.js中加入：
module.exports = {
...
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
a : 'src/js/a.js',
b : 'src/js/b.js'
}
},
...
}
relolve.alias和plugin中的ProvidePlugin插件的关系：
使用relove.alias只是替代require引入模块长长的一段地址定位，方便通过别名去引入，而使用ProvidePlugin插件指定的标识符已经跟需要require的模块绑定，使用的时候直接用标识符不需要再require。
配置Webpack-dev-server代理:
webpack-dev-serve是一个小型的Node.js Express服务器，能够可以直接将我们的webpack里的项目直接跑起来。
//webpack.config.js上添加
module.exports = {
...
devServer: {
historyApiFallback : true, //访问服务器上不存在的资源将重定向到index.html页面
inline: true, //文件发生变化时，更新页面
hot: true, // 热模块替换，只更新文件变化的那一部分
progress: true //显示打包的进度
},
...
}
在终端中直接使用webpack-dev-server --hot --progress --inline就可以跑起来了。
为了方便以后调试，在package.json文件中加入语句：
//package.json
...
start : "webpack-dev-server --hot --progress --inline --colors",
//同样，为方便以后webpack命令我们也可以加入
build : "webpack --progress --colors"
...
在终端中输入npm start，就会提示打开http://localhost:8080
