(精华)2020年7月12日 webpack 常见插件的使用
发布日期:2021-06-29 15:07:00
浏览次数:2
分类:技术文章
本文共 1184 字,大约阅读时间需要 3 分钟。
重点插件plugin介绍
插件与模块解析的功能不一样, 模块解析是为了导入非es5格式js或其它资源类型文件, 定制了一些loader。 插件是对最后的打包文件进行处理的,也可以理解loader是为打包前做准备,plugin是打包再进行处理
-
官方插件的使用步骤(内置插件 2 步) 1 配置文件中导入 XxxxPlugin,constwp=require(XxxxPlugin) 2 在 plugins 这个数组中加入一个插件实例,newwp.XxxxPlugin({对象})
-
第三方插件的使用步骤(第 3 方 3 步,多一次安装) 1 安装(第三方插件要安装)根目录>cnpmi-DXxxxPlugin 2 配置文件中导入插件constXxxxPlugin=require(‘xxxx-plugin’) 3 在 plugins 这个数组中加入一个插件实例,newXxxxPlugin({对象})
-
官方插件有
可以在配置中打印查看 constwebpack=require(‘webpack’) console.log(webpack)//这里可以看到哪些是 webpack 内置的插件
插件清单
> 01.webpack.BannerPlugin //加注释 > 02.terser-webpack-plugin //代码缩小,压缩 > 03.html-webpack-plugin 生成html页 > 04.extract-text-webpack-plugin,mini-css-extract-plugin //提取抽离css> 05.DefinePlugin//定义一个全局常量,如newwp.DefinePlugin({BJ:JSON.stringify('北京'),}),在待打包的js文件中可以> 直接使用,如在./src/main.js中console.log('我是在配置文件中定义的'+BJ) > 06.Dllplugins // 允许创建一个在编译时可以配置的全局常量> 07.copy-webpack-plugin //在 webpack中拷贝文件和文件夹> 08.optimize-css-assets-webpack-plugin // 压缩css> 09.assets-webpack-plugin // assets-webpack-plugin > 10:EnvironmentPlugin//不同于 DefinePlugin,默认值将被 EnvironmentPlugin 执行 JSON.stringify> 11.cross-env //scripts设置环境变量> 12.ProvidePlugin//微服务api配置> 13.preload-webpack-plugin //让静态资源支持 DNS 预解析和预加载
转载地址:https://codeboy.blog.csdn.net/article/details/107295451 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月16日 18时13分28秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Linux下EasyPanel版本安装及升级
2019-04-29
raspberry pi(树莓派) + easycap d60 视频采集
2019-04-29
WebRTC
2019-04-29
rfc5766-turn-server NAT
2019-04-29
webrtc详细教程
2019-04-29
Android IOS WebRTC 音视频开发总结
2019-04-29
报表图表样式
2019-04-29
android模板图例
2019-04-29
树莓派网线直连
2019-04-29
复合材料培训(I第七期)
2019-04-29
复合材料生活中的应用
2019-04-29
ABAQUS复合材料(适合小白)
2019-04-29
ABAQUS高级案例解析
2019-04-29
人工智能药物研发
2019-04-29
【超级干货+福利】AIDD最全面的学习教程
2019-04-29
最新通知:AIDD与网络药理学资料大全
2019-04-29
Lammps分子动力学与第一性原理材料模拟及催化
2019-04-29
实习生小白的日常
2019-04-29
实习小白的日常(4)
2019-04-29
微信扫码登录验证PHP代码(不用开放平台)
2019-04-29