webpack的plugin
webpack的plugin
plugin插件用于扩展webpack的功能的扩展，例如打包时候优化，文件压缩。
**loader和plugin的区别**
loader主要用于转化某些类型的模块，是一个转化器。
plugin主要是对webpack的本身的扩展，是一个扩展器。
**plugin的使用过程**
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要在安装)
步骤二：在**webpack.config.js**中的plugins中配置插件。
> 准备工作
>
> 复制04-webpack的vue到同级目录，并改名为05-webpack的plugin
添加版权的Plugin
BannerPlugin插件是属于webpack自带的插件可以添加版权信息。
自带的插件无需安装，直接配置。
先获取webpack的对象，在配置BannerPlugin插件。
```javascript
//获取webpack
const webpack = require('webpack')
//2.配置plugins
module.exports = {
...
plugins:[
new webpack.BannerPlugin('最终解释权归zz所有')
]
}
```
打包后，查看bundle.js，结果如图所示：
多了一行我们自定义的版权声明注释。
### 打包html的plugin
之前我们的index.html文件都是存放在根目录下的。
在正式发布项目的时候发布的是dist文件夹的内容，但是dist文件夹是没有index.html文件的，那么打包就没有意义了。
所以我们需要将index.html也打包到dist文件夹中，这就需要使用**`HtmlWebpackPlugin`**插件了。
> **`HtmlWebpackPlugin`**：
>
> 自动生成一个index.html文件（指定模板）
>
> 将打包的js文件，自动同script标签插入到body中
首先需要安装**`HtmlWebpackPlugin`**插件
```shell
npm install html-webpack-plugin --save-dev
```
使用插件，修改webpack.config.js文件中的plugins部分
```javascript
//获取htmlWebpackPlugin对象
const htmlWbepackPlugin = require('html-webpack-plugin')
//2.配置plugins
module.exports = {
...
plugins:[
new webpack.BannerPlugin('最终解释权归zz所有'),
new htmlWbepackPlugin({
template: 'index.html'
})
]
}
```
> 1.template表示根据哪个模板来生成index.html
>
> 2.需要删除output中添加的publicPath属性，否则插入的script标签的src可能有误
再次打包，打开dist文件夹，多了一个index.html
自动加入了script引入了bundle.js。
### 压缩打包代码插件
uglifyjs-webpack-plugin是第三方插件，如果是vuecli2需要指定版本1.1.1。
安装：
```shell
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
```
配置plugin
```javascript
//获取uglifyjs-webpack-plugin对象
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
//2.配置plugins
module.exports = {
...
plugins:[
new webpack.BannerPlugin('最终解释权归zz所有'),
new htmlWbepackPlugin({
template: 'index.html'
}),
new uglifyjsWebpackPlugin()
]
}
```
打包过后，打开bundle.js，发现已经压缩了，此时版权声明被删除了。
> webpack高版本自带了压缩插件。
浙公网安备 33010602011771号