1、认识plugin
plugin是什么？插件的意思，通常用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。
2、loader和plugin区别
loader主要用于转换某些类型的模块，它是一个转换器
plugin是插件，它是对webpack本身的扩展，是一个扩展器。
3、plugin的使用过程
通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
在webpack.config.js中的plugins中配置插件。
接下来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让webpack更好使用
添加版权的plugin，为打包的文件添加版权声明
插件名字：BannerPlugin，属于webpack自带的插件，配置webpack.config.js
const path = require("path")
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
...
plugins:[
new webpack.BannerPlugin('最终版权归萌小七所有')
],
}
重新打包程序，查看main.js文件头部，会看到如下信息
/*!
*Vue.js v2.6.12
* (c) 2014-2020 Evan You
* Released under the MIT License.
*/
/*! 最终版权归萌小七所有 */
4、打包html的plugin
目前，index.html文件是存放在项目根目录下的。
在真实发布项目时，发布的是dist文件夹中的内容，但dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件
HtmlWebpackPlugin插件可以为我们做这些事情：
自动生成一个index.html文件（可以指定模板来生成）
将打包的js文件，自动通过script标签插入到body中
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
使用插件，修改webpack.config.js文件中plugins部分的内容如下：
这里的template表示根据什么模板来生成index.html
另外我们需要删除之前在output中添加的publicPath属性
否则插入的script标签中的src可能会有问题
const path = require("path")
const webpack = require('webpack'); // 访问内置的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
entry: "./src/main.js",
// 出口：通常是一个对象，里面至少包含两个属性，path和filename
output: {
//注意：path通常是一个绝对路径
path: path.resolve(__dirname, "dist"),
filename: "main.js",
// publicPath: "dist/",
},
plugins:[
new webpack.BannerPlugin('最终版权归萌小七所有'),
new htmlWebpackPlugin({
template:'index.html'
})
],
}
5、uglifyjsWebpackPlugin的使用
在项目发布之前，我们必然需要对js等文件进行压缩处理
我们就对打包的js文件进行压缩
使用一个第三方插件uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
修改webpack.config.js文件，使用插件
const webpack = require('webpack'); // 访问内置的插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...// 省略一些代码
plugins:[
new webpack.BannerPlugin('最终版权归萌小七所有'),
new htmlWebpackPlugin({
template:'index.html'
}),
new uglifyJsPlugin()
],
}
