webpack 需要使用的插件都在配置文件 webpack.config 中通过 require 导入，然后在插件集属性 plugins 的数组中进行配置，需要用哪个插件就在数组中创建这个类型的实例，在实例的构造函数的参数中可以传参进行属性配置。
常用插件：
clean-webpack-plugin
-
功能： 在webpack打包项目之前，这个插件会先清空dist目录中的历史文件
-
原理：
-
安装：
$ yarn add clean-webpack-plugin --dev
- 配置：
// 引入插件：通过解构
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 配置
module.exports = {
...,
// 使用的插件配置在 plugins 属性的数组中
plugins: [
// 通过导出的类型创建实例存放在数组中
new CleanWebpackPlugin()
]
}
html-webpack-plugin
-
功能： 通过 webpack 自动生成 HTML文件内容及HTML文件
-
原理：
-
安装：
$ yarn add html-webpack-plugin --dev
- 配置：
// 如下
自定义生成HTML文件内容：
// src/index.html
<!--
自定义 html 数据模板
-->
<h1><%= htmlWebpackPlugin.options.title %></h1>
// 配置：webpack.config.js
module.exports = {
...,
// 使用的插件配置在 plugins 属性的数组中
plugins: [
// 用于生成 index.html
new HtmlWebpackPlugin({
title:'webpack plugin 111', // 自定义HTML标题
meta:{
viewport:'width=device-wdith' // 自定义meta中的viewport属性
},
template: './src/index.html' // 指向要引用的html模板
})
]
}
// dist/index.html
<div class="container">
// 自动生成的index.html自定义模板中的html标签
<h1>webpack plugin 111</h1>
</div>
<script type="text/javascript" src="bundle.js"></script></body>
同时输出多个HTML文件：
// 配置：webpack.config.js
module.exports = {
...,
// 使用的插件配置在 plugins 属性的数组中
plugins: [
// 用于生成 index.html
new HtmlWebpackPlugin({
title:'webpack plugin 111', // 自定义HTML标题
meta:{
viewport:'width=device-wdith' // 自定义meta中的viewport属性
},
template: './src/index.html' // 指向要引用的html模板
})，
// 一个 HtmlWebpackPlugin 实例就是生成一个HTML文件
new HtmlWebpackPlugin({
filename: 'demo.html' // 在 dist 目录中就会生成该HTML文件
})
]
}
copy-webpack-plugin
-
功能： 项目中一些不需要参与构建的静态文件，可以存放在根目录中的 public 目录中，在打包时，可以一并复制到输出目录
-
原理：
-
安装：
$ yarn add copy-webpack-plugin --dev
- 配置： 需要拷贝的文件存放在CopyWebpackPlugin类型的实例参数中，参数要求是存放在数组中，内部的参数可以是一个目录，也可以是通配符，可以是相对路径
module.exports = {
...,
// 使用的插件配置在 plugins 属性的数组中
plugins: [
...,
new CopyWebpackPlugin([
// 'public/**' // 通配符：输出在 dist/public/ 目录下
'public' // 拷贝目录：输出在dist根目录中。
])
]
}
**-webpack-plugin
-
功能：
-
原理：
-
安装：
- 配置：
