56 webpack中常用的插件

常用plugin

在这里对常用的Plugin做一下总结,方便我们找到自己所需的Plugin。

文件处理相关

  • copy-webpack-plugin(https://www.npmjs.com/package/copy-webpack-plugin):复制指定文件到输出目录中的指定位置。
  • clean-webpack-plugin(https://www.npmjs.com/package/clean-webpack-plugin):重新构建的时候清除上一此的构建结果。
  • zip-webpack-plugin(https://www.npmjs.com/package/zip-webpack-plugin):输出构建资源的.zip格式的压缩包。

优化相关

  • terser-webpack-plugin(https://www.npmjs.com/package/terser-webpack-plugin):压缩JavaScipt代码。
  • optimize-css-assets-webpack-plugin(https://www.npmjs.com/package/optimize-css-assets-webpack-plugin):压缩css代码。
  • mini-css-extract-plugin(https://www.npmjs.com/package/mini-css-extract-plugin):用于从JavaScriptd代码中抽离css代码,通过DOM操作加载到页面中。
  • imagemin-webpack-plugin(https://www.npmjs.com/package/imagemin-webpack-plugin):压缩图片文件。
  • dll-plugin(https://www.webpackjs.com/plugins/dll-plugin):构建动态链接库。
  • html-webpack-plugin(https://www.npmjs.com/package/html-webpack-plugin):根据配置生成html文件。
  • web-plugin-html(https://www.npmjs.com/package/web-webpack-plugin):功能与html-webpack-plugin类似,功能更加强大。
  • serviceworker-webpack-plugin():为网页应用增加离线缓存功能。
  • named-chunks-plugin(https://www.npmjs.com/package/serviceworker-webpack-plugin):通过固定chunkId,优化缓存。
  • provide-plugin(https://www.webpackjs.com/plugins/provide-plugin):从环境中提供的全局变量中加载模块,从而不同导入对应的文件。
  • i18n-webpack-plugin(https://www.npmjs.com/package/i18n-webpack-plugin):使网页支持国际化。
  • ignore-plugin(https://www.webpackjs.com/plugins/ignore-plugin/):使webpck忽略对部分文件的处理。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用webpack插件有以下几个: 1. 热更新插件(HotModuleReplacementPlugin):该插件可以实现在开发过程,无需刷新页面即可实时更新修改的代码,提高开发效率。\[1\] 2. 提取文本插件(ExtractTextWebpackPlugin):该插件可以将CSS样式从JavaScript文件提取出来,单独生成一个CSS文件,以减小文件体积并提高加载速度。\[2\] 3. 代码压缩插件(UglifyJsPlugin):该插件可以对JavaScript代码进行压缩和混淆,减小文件体积,提高加载速度。\[2\] 4. HTML插件(HtmlWebpackPlugin):该插件可以根据模板生成HTML文件,并自动引入打包后的JavaScript和CSS文件,简化HTML文件的创建和维护工作。\[1\] 这些插件可以通过在webpack配置文件plugins选项进行配置和使用。同时,还有许多其他的插件可供选择,根据具体需求选择合适的插件来优化和增强webpack的功能。\[3\] #### 引用[.reference_title] - *1* *3* [webpack--总结18个webpack插件,总会有你想要的](https://blog.csdn.net/wenmin1987/article/details/107013532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Webpack常用插件总结](https://blog.csdn.net/qq_39040042/article/details/88019723)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值