首先我们了解一下什么是plugin
plugin是什么？
- plugin是插件的意思，通常是用于对某个现有的架构进行扩展
- webpack中的plugin，就是对webpack现有功能的各种扩展，比如打包优化、文件压缩等等
loader和plugin的区别
- loader主要用于加载/转换某些类型的模块，它是一个加载/转换器
- plugin是插件，它是对webpack本身的扩展，它是一个扩展器
plugin的使用过程
- 步骤一：通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
- 步骤二：在webpack.config.js中的plugins配置插件
一、BannerPlugin（添加版权声明）
1、说明
：在打包时为打包文件的头部添加版权声明（内容自定义）
2、安装
：这是一个webpack自带的plugin，前提需要在本地文件夹webpack
- 假如读者使用的是webstorm编译器，只需在终端（Terminal），输入以下命令即可
- 另外也可以通过cmd进入PC控制台，通过 cd 命令进入你要安装 webpack的文件夹，再执行以下命令
npm install --save-dev webpack@3.6.0
3、使用
- 已局部安装webpack的条件下，进入webpack配置文件 （webpack.config.js）引入webpack
//引入webpack
const webpack=require('webpack')
module.exports={
//在此处配置插件
plugins:[
//1、使用BannerPlugin插件，语句单引号中的内容自定义
new webpack.BannerPlugin('xxxxxxxxxxxxxxx')
]
}
二、htmlWebpackPlugin（打包html文件）
1、说明
：将 .html 文件到打包到 dist（默认打包文件存放的文件名） 文件夹下，因为 打包文件最终是要放到服务器上进行运行，如果你的文件夹中没有 .html文件，那么其中的文件以 js 为主便没有意义
：在使用这个命令并完成打包，会自动将当前文件夹下的 js 文件 引入进来
：以模板的方法添加.html文件，这是非常便捷的方法之一；将原有的.html文件为模板添加到 dist 打包文件夹下 ；打包后会自动引入js文件，所以需要将原有 js 文件的引入 删掉即可
2、安装
- 在编译器终端通过以下命令进行安装，PC控制台安装方法上述已有，请自行查看
npm install html-webpack-plugin --save-dev
3、使用
- 在webpack配置文件中引入 html-webpack-plugin 文件，并在 plugins 中添加以下语句
//引入webpack
const webpack=require('webpack')
//引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
//在此处配置插件
plugins:[
//1、使用BannerPlugin插件，语句单引号中的内容自定义
new webpack.BannerPlugin('xxxxxxxxxxxxxxx')
//2、使用html-webpack-plugin插件，确保你的webpack配置文件与index.html文件属于同一级目录
new htmlWebpackPlugin({
//添加模板
template:'index.html'
})
]
}
三、uglifyjsWebpackPlugin（压缩js文件）
1、说明
：此插件会压缩打包后的 js 文件，简单来说就是丑化。将缩进、注释删掉，简化变量名
2、安装
- 在编译器终端通过以下命令进行安装，PC控制台安装方法上述已有，请自行查看
npm install uglifyjs-webpack-plugin --save-dev
3、使用
- 在webpack配置文件中引入uglifyjs-webpack-plugin 文件，并在 plugins 中添加以下语句
//引入webpack
const webpack=require('webpack')
//引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin')
//引入uglifyjs-webpack-plugin
const uglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
module.exports={
//在此处配置插件
plugins:[
//1、使用BannerPlugin插件，语句单引号中的内容自定义
new webpack.BannerPlugin('xxxxxxxxxxxxxxx')
//2、使用html-webpack-plugin插件，确保你的webpack配置文件与index.html文件属于同一级目录
new htmlWebpackPlugin({
//添加模板
template:'index.html'
}),
//3、使用uglifyjs-webpack-plugin插件
new uglifyjsWebpackPlugin()
]
}
文章已结束，若文中内容有误，希望读者能反馈并指出，我会第一时间修改，谢谢！
转载：https://blog.csdn.net/m0_49007778/article/details/116465805
查看评论