认识plugin
plugin是什么?
plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
loader和plugin区别
loader主要用于转换某些类型的模块,它是一个转换器。
plugin是插件,它是对webpack本身的扩展,是一个扩展器。
plugin的使用过程:
步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件。
添加版权的Plugin——BannerPlugin
为打包的文件添加版权声明,该插件名字叫BannerPlugin,属于webpack自带的插件。
按照下面的方式来修改webpack.config.js的文件:
plugins: [
new webpack.BannerPlugin('最终版权归aaa所有'),
]
重新打包程序:查看bundle.js文件的头部,看到如下信息
打包html的plugin——html-webpack-plugin
HtmlWebpackPlugin插件可以为我们做这些事情:
自动生成一个index.html文件(可以指定模板来生成)
将打包的js文件,自动通过script标签插入到body中
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
使用插件,修改webpack.config.js文件中plugins部分的内容如下:
- 这里的template表示根据什么模板来生成index.html
- 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 另外,我们需要删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有问题
- 添加plugin参数依赖
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
- 去掉Html中的Script标签
- 重新打包
js压缩的Plugin——uglifyjs-webpack-plugin
安装uglifyjs-webpack-plugin插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js文件,使用插件:
- 引入插件
const UglifyjsWebpackPligin = require('uglifyjs-webpack-plugin')
- 添加plugin参数依赖
plugins: [
new UglifyjsWebpackPligin()
]
- 重新打包
- 查看打包后的bunlde.js文件,是已经被压缩过了