plugin
plugin(插件),通常是对某个现有的架构进行扩展,webpack中的插件就是对现有功能的各种扩展,比如打包优化,文件压缩等。
1.loader和plugin的区别
- loader主要用于转换某些类型的模块,loader是一个转换器。
- plugin是插件,它是对webpack本身的扩展,是一个扩展器。
2.如何使用plugin
- 通过npm安装需要使用的plugin(某些webpack已经内置的插件不需要安装。)
- 在webpack.config.js中配置插件。
3.使用plugin
- 声明版权:BannerPlugin
BannerPlugin属于webpack已经内置了的,故可以直接使用。
//导包
const webpack=require('webpack')
//使用
plugins:[
new webpack.BannerPlugin('最终版权归qqq所有')
]
-
打包index.html文件:html-webpack-plugin
压缩js文件:uglifyjs-webpack-plugin,开发阶段一般不使用
这两个需要npm安装后使用。npm install html-webpack-plugin@3.2. 0–save-dev; uglifyjs-webpack-plugin@1.1.0 --save-dev
//导包
const HtmlWebpackPlugin=require('html-webpack-plugin')
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
//使用
plugins:[
new webpack.BannerPlugin('最终版权归qqq所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new UglifyjsWebpackPlugin()
]
}