插件的使用和loader一样，不仅需要安装，也需要在webpack.config.js中的plugins中进行配置。plugins是一个数组，数组的每一个元素都是一个对象。
clean-webpack-plugin
可以用于在webpack每一次打包时先删除先前打包的内容。安装：
npm install clean-webpack-plugin -D配置：
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output:{
path: path.resolve(__dirname,"./build"),
filename:"bundle.js"
},
plugins:[
new CleanWebpackPlugin()
]
}html-webpack-plugin
可以将html文件也打包。如果不指定模板的话就会按照默认的模板。安装：
npm install html-webpack-plugin -D可以对html指定套用的模板：
const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports = {
plugins:[
new HtmlWebpackPlugin({
template: "./public/index.html"
})
]
}// /public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL%> favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong><%= htmlWebpackPlugin.options.title %> not work</strong>
</noscript>
<div id="app"></div>
</body>
</html><% 变量 %>是ejs语法，可以使用DefinePlugin来为其指定变量。
DefinePlugin
DefinePlugin是WebPack内部的插件，直接从Webpack中结构就能得到，不需要另外安装：
const {DefinePlugin}=require("webpack");使用方法：在DefinePlugin的实例化过程中传入要指定的参数：
const {DefinePlugin}=require("webpack");
module.exports = {
plugins:[
new DefinePlugin({
BASE_URL: "'./'"
})
]
}CopyWebpackPlugin复制文件
通过CopyWebpackPlugin可以将需要复制的文件（如/public/）复制到打包的目的文件夹中。安装：
npm install copy-webpack-plugin -Dpatterns数组表示要复制的匹配信息。from指定复制的源文件夹，to表示目的文件夹（根目录为build），ignore表示忽略的文件。
plugins:[
new CopyWebpackPlugin({
patterns: [
{
from: "./public",
to: "./",
globOptions:{
ignore:[
"**/index.html"
]
}
}
]
})
]webpack的其它设置
module.exports = {
// 设置模式
// development 开发阶段
// production 准备打包上线
mode:"development",
// 设置source-map，建立js映射文件，方便调试代码错误
devtool: "source-map"
}