Webpack之plugin的使用
更新时间：2023年02月03日 09:13:20 作者：不情不愿
本文主要介绍了Webpack之plugin的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
什么是plugin？
plugin是插件的意思，通常用于对现有的架构进行扩展。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
loader和plugin的区别： loader主要用于转换某些类型的模块，是一个加载器；plugin是插件，对webpack本身进行扩展，是一个扩展器；plugin的使用步骤： 通过npm 安装需要使用的plugins（有些内置的不需要再安装）；在webpack.config.js中的plugins中配置插件；webpack中常用的一些插件：
1.添加版权的plugin: BannerPlugin
webpack自带的插件，无需安装，只需对webpack.config.js文件进行配置即可：
打包运行：npm run build
打包后的bundles.js中会有出现以上版权所有信息。
2.打包html的plugin: html-webpack-plugin
该插件能够自动生成一个index.html文件（可以指定模板来生成），还能够将打包的js文件，自动通过scripts标签插入到body中。
安装插件：
npm install html-webpack-plugin@3.2.0 --save-dev
配置webpack.config.js文件
打包运行：npm run build
3.js压缩的plugin ：uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
配置webpack.config.js文件
打包运行：npm run build，即可实现js文件的打包。
可见打包的js文件已经被尽可能的压缩了！
到此这篇关于Webpack之plugin的使用的文章就介绍到这了,更多相关Webpack plugin内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了根据一张图片的拍摄时间获取到这个时间前二后三的一个五秒钟的视频信息的实例方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码。2010-01-01
JavaScript中全局变量、函数内变量以及常量表达式的效率测试
直接用字符串常量要比利用全局变量快，但创建正则表达式就比起用全局变量要慢上很多了。2009-11-11
这篇文章主要介绍了JavaScript树结构深度优先算法，树结构可以说是前端中最常见的数据结构之一，比如说DOM树、级联选择、树形组件，更多相关内容需要的小伙伴可以参考一下2022-07-07
这篇文章介绍了javascript动态插入技术，有需要的朋友可以参考一下2013-11-11
小程序如果在页面内进行复杂的界面设计,用户进行返回操作会直接离开当前页面,不符合用户预期,下面这篇文章主要给大家介绍了关于微信小程序阻止页面返回(包滑动、自动返回键)的相关资料,需要的朋友可以参考下2023-06-06
JavaScript数组去重是前端面试酷爱的问题，问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多，到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据，随着数据越多效率很明显的就体验了出来。下面来一起看看吧。2016-10-10
这篇文章主要为大家详细介绍了javascript中的类,继承,构造函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
webpack-dev-server 的 host 配置 0.0.0.0的方法
这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下2024-01-01
本文介绍了 15 个非常强大的 JavaScript Web UI 库，非常适合各种各种规模的富 Web 应用的开发。2010-05-05
最新评论