webpack之 plugin(插件)
plugin
plugin是插件的意思,通常用来对某个现有的架构就行拓展
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等
loader和plugin区别
loader主要用于转换某些类型的模块,它是一个转换器
plugin是插件,它是对webpack本身的扩展,是一个扩展器
plugin的使用过程
步骤一:通过npm安装需要使用的plugin(某些webpack已经内置的插件不需要安装
步骤二:在webpack.config.js中plugins中配置插件 我们先来使用一个最简单的插件,为打包的文件添加版权声明
该插件名字叫BannerPlugin,属于webpack自带的插件 第二个插件,打包html的plugin
目前,我们的demo.html 文件是存放在项目的根目录下。
我们知道,在真实发布项目时,发布的是dist文件夹的内容。
所以我们需要将index.hmtl文件打包到dist文件夹中
HtmlWebpackPlugin插件可以为我们做的事情:
自动生成一个inde.html文件(可以指定模板来生成
将打包的js文件,自动通过script标签插入到body中
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev 第三个插件,js压缩的Plugin
在项目发布之前,我们必然需要对js等文件进行压缩处理
我们使用一个第三方的插件uglifyis-webpack-plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
以上插件都需要在webpack.config.js里面配置
三个插件的引入
三个插件的配置:
由于第一个插件的注释会被第三个插件删掉,这里就不赘述了
第二个插件效果:
第三个插件效果:
webpack之 plugin(插件)的更多相关文章
- webpack(9)plugin插件功能的使用
plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
- webpack常用的插件安装命令
webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...
- AS Gradle构建工具与Android plugin插件【大全】
Android plugin version 与 gradle version 的关系 Gradle是一种构建工具,它通过编写一个名为build.gradle的脚本文件对项目进行设置,再根据这个脚本对 ...
- vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...
- idea使用破解版mybatis plugin插件失败,idea打不开的解决方案
记一次错误解决方案 打开 idea.vmoptions (Help -> Edit Custom VM Options...) ,在这里进行了修改 加了破解jar包的路径,但是之前的路径中有中文 ...
- 转:JMeter监控内存及CPU ——plugin插件监控被测系统资源方法
JMeter监控内存及CPU ——plugin插件监控被测系统资源方法 jmeter中也可以监控服务器的CPU和内存使用情况,但是需要安装一些插件还需要在被监测服务器上开启服务. 1.需要的插件准备 ...
- AS 自定义 Gradle plugin 插件 案例 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- mysql 查询语句的执行顺序(重重点)
一 SELECT语句关键字的定义顺序 SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOI ...
- JS笔记之第二天
一元运算符:++ -- 分为前++和后++ and 前--和后-- 如果++在后面,如:num++ +10参与运算,先参与运算,自身再加1 如果++在前面,如:++num+10参与运算,先自身加1, ...
- MySQL数据库的两种连接方式:TCP/IP和Socket
Linux平台环境下主要有两种连接方式,一种是TCP/IP连接方式,另一种就是socket连接. 在Windows平台下,有name pipe和share memory(不考虑)两种. TCP/IP连 ...
- postman设置变量
参数化 变量引用格式:{{username}} , 区别jmeter的 {username} 一.设置与引用环境变量 背景:在不同的环境下跑相同的测试,生产环境或测试环境 二.设置与引用全局变量 ...
- RocketMQ幂等性问题
什么是幂等性: 在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 当出现消费者对某条消息重复消费的情况时,重复消费的结果与消费一次的结果是相同的,并且多次消费并未对业务系 ...
- Windows显示默认桌面图标(计算机,用户的文件,网络,控制面板,回收站)
1.按Win+R 2.复制以下命令 rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 3.点击运行,根据需求勾选相应图标即可
- css背景颜色、背景图片,以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• ba ...
- 「JOI 2017 Final」绳
题意 loj 做法 首先我们观察到最后能折起来的充要条件是: 只有两个颜色,除首尾外,所有颜色块内的数量为偶数 因为为偶数,我们进一步推论: 所有颜色块起始位置奇偶性相同 然后因为增与减都会有相同花费 ...
- defender 书荐
2018全年度推荐: 1.[法]大仲马——基督山伯爵 2.[美]加西亚·马尔克斯——百年孤独 3.[法]大仲马——三个火枪手 2019第一季度推荐: 1.霍达——穆斯林的葬礼 2.[苏联]尼·奥斯特洛 ...
- PHP0002:PHP基础1
PHP基础 一个表单同时提交get 和 post php保存数据到文件