一、什么是plugins
plugins可以使webpack在运行到某个时刻的时候，帮你做一些事情，类似于生命周期一样
plugins，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整
个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点
二、html-webpack-plugin
1、安装
cnpminstallhtml-webpack-plugin-D
2、作用
会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html中，同时还可以配合配置项的chunks实现多页面开发
3、基本使用
plugins:[
newHtmlWebpackPlugin({
filename:"index.html",
template:"./index.html",
inject:"head",
chunks:["app"],
minify:{
removeComments:true,
collapseWhitespace:true
}
})
]
filename:打包后生成html的文件名称
template:使用的模板
inject:JS在页面的哪个部分引入
chunks:指定引入的JS文件
minify:压缩html文件
removeComments:删除注释
collapseWhitespace:删除空格
favicon:图标
三、clean-webpack-plugin
1、安装
cnpminstallclean-webpack-plugin-D
2、作用
在我们每次打包的时候会重新生成一个dist文件，类似于先将上一次的dist文件删除，然后在重新生成一个dist目录
3、基本使用
constCleanWebpackPlugin=require("clean-webpack-plugin");
module.exports={
plugins:[
newCleanWebpackPlugin(["dist"])
]
}
参数是一个数组，值为需要删除的目录，在打包的时候会通过clean-webpack-plugin将dist目录删除
四、extract-text-webpack-plugin
1、安装
cnpminstall-Dextract-text-webpack-plugin@next
2、作用
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱及JS文件过大等的现象
3、基本使用
constExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
module:{
rules:[
{
test:/\.(css|scss)$/,
use: ExtractTextPlugin.extract({
//编译后用什么loader来提取css文件
fallback: "style-loader",
// 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
use:["css-loader","sass-loader"]
})
},
]
},
plugins:[
newExtractTextPlugin("css/[name].css")
//或者
newExtractTextWebpackPlugin({
filename: '[name].[hash:8].css',
allChunks: true
}),
]
}
五、HotModuleReplacementPlugin(问题)
1、安装
cnpm install webpack -D
2、作用
启用热模块更换，也称为HMR。
永远不要在生产环境( production )下启用 HMR
主要用来当代码产生变化后，可以在不刷新游览器的情况下对局部代码块进行替换更新。这在很多情况下都很有用，例如在处理弹出框时，使用HMR可以及时的看到变化，如果用刷新游览器的方式会回到初始页面。
3、基本使用
plugins: [
new webpack.HotModuleReplacementPlugin(), //热更新！
]