webpack之『使用横幅 Plugin』_莫余的博客-程序员宝宝

技术标签: vue  凌晨3:40的Vue  

认识plugin

plugin是什么?

plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。

loader和plugin区别

loader主要用于转换某些类型的模块,它是一个转换器。
plugin是插件,它是对webpack本身的扩展,是一个扩展器。

plugin的使用过程:

步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件。

添加版权的Plugin——BannerPlugin

为打包的文件添加版权声明,该插件名字叫BannerPlugin属于webpack自带的插件。

按照下面的方式来修改webpack.config.js的文件:

    plugins: [
        new webpack.BannerPlugin('最终版权归aaa所有'),
    ]

重新打包程序:查看bundle.js文件的头部,看到如下信息

在这里插入图片描述

打包html的plugin——html-webpack-plugin

HtmlWebpackPlugin插件可以为我们做这些事情:

自动生成一个index.html文件(可以指定模板来生成)
将打包的js文件,自动通过script标签插入到body中

安装HtmlWebpackPlugin插件

npm install html-webpack-plugin --save-dev

使用插件,修改webpack.config.js文件中plugins部分的内容如下:

  • 这里的template表示根据什么模板来生成index.html
  • 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
  • 另外,我们需要删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有问题
  • 添加plugin参数依赖
    plugins: [
        new HtmlWebpackPlugin({
    
            template: 'index.html'
        })
    ]
  • 去掉Html中的Script标签
  • 重新打包

js压缩的Plugin——uglifyjs-webpack-plugin

安装uglifyjs-webpack-plugin插件

npm install uglifyjs-webpack-[email protected].1.1 --save-dev

修改webpack.config.js文件,使用插件:

  • 引入插件
const UglifyjsWebpackPligin = require('uglifyjs-webpack-plugin')
  • 添加plugin参数依赖
    plugins: [
        new UglifyjsWebpackPligin()
    ]
  • 重新打包
  • 查看打包后的bunlde.js文件,是已经被压缩过了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44824148/article/details/113173826

智能推荐

计算机等级考试二级office考点教材+课程资料+考试题库软件_zhishitu7的博客-程序员宝宝_二级office资料

悄悄(超大声)告诉大家一个消息距离计算机二级考试好像仅仅剩下15天了![偷笑]弱弱问一句你做好准备了吗?什么?还没有?别怕知识兔也帮你准备了一份计算机考试攻略里面全是满满的干货呢!不妨在考前来个小小的突击快来查收叭~01题型分值No.1MSOffice高级应用考试必备!最新计算机二级考试题库 上机考试系统 网课教材等资料!(1)单项选择题:20分(含公共基础知识部分 10分)(2)文字处理题(Word):30分(3)电子表格...

GDAL源码剖析(二)之编译说明_箜_Kong的博客-程序员宝宝_“gdal_priv.h”: no such file or directory

一、简单的编译1、使用VisualStudio IDE编译首先进入GDAL的源代码目录,可以看到有几个sln为后缀的文件名,比如makegdal10.sln,makegdal80.sln,makegdal71.sln,makegdal90.sln 。这些文件是VisualStudio的工程文件,后面的数字对应的VS的版本号,71表示的VS2003,80表示VS2005,90表示VS2008

QQ炫舞网吧安装常见问题解决办法_weixin_34015566的博客-程序员宝宝

说明:无盘客户机和虚拟客户机的问题正在解决中...本部分暂时只针对有硬盘客户机(有硬盘客户机). QQ炫舞在 网维,迅闪,易游等网吧管理软件上的安装(有硬盘客户机) 一,安装 当前,有些网吧反应无法把QQ炫舞安装在网吧管理软件上。以下是安装方法: 首先,必须在服务器进行完整安装。并且升级到最新版本。 假设QQ炫舞被安装在服务器D盘的“D:\网络游戏\QQ炫舞...

R语言中的横向数据合并merge及纵向数据合并rbind的使用_weixin_30652271的博客-程序员宝宝

R语言中的横向数据合并merge及纵向数据合并rbind的使用我们经常会遇到两个数据框拥有相同的时间或观测值,但这些列却不尽相同。处理的办法就是使用merge(x, y ,by.x = ,by.y = ,all = ) 函数。#合并ID<-c(1,2,3,4)name<-c("A","B","C","D")score<-c(60,70,80,90)student1&lt...

《中国史学名著》的读后感作文2600字_weixin_34167043的博客-程序员宝宝

2019独角兽企业重金招聘Python工程师标准>>> ...

兔子繁殖问题(C语言)_沫忆拾忆的博客-程序员宝宝_c语言兔子繁殖问题

已知有一对兔子,每个月可以生一对兔子,而小兔子一个月后又可以生一对小兔子(比如:2月份出生的小兔子4月份可以生育)。也就是说,兔子的对数为:第一个月1对,第二个月2对,第三个月3对,第四个月5对…假设兔子的生育期为两年,且不死。那么问题来了,你能说出每个月的兔子数么?输入格式:输入一个数n,表示第n个月,1<=n<=24。输出格式:输出这个月兔子的数目。输入样例:4输出样例:5#include<stdio.h>int main(){ int n , s_1671465600

随便推点

PHP安装及lnmp完整搭建-wordpress_weixin_34290352的博客-程序员宝宝

安装所需的lib库[[email protected]]#rpm-qazlib-devellibxml2-devellibjpeg-devellibjpeg-turbo-devellibiconv-develzlib-devel-1.2.3-29.el6.x86_64[[email protected]]#rpm-qafreetype-devell...

Python爬虫新手入门教学(八):爬取论坛文章保存成PDF_松鼠爱吃饼干的博客-程序员宝宝_爬虫新手可以爬到论坛里吗

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。Python爬虫、数据分析、网站开发等案例教程视频免费在线观看https://space.bilibili.com/523606542前文内容Python爬虫新手入门教学(一):爬取豆瓣电影排行信息Python爬虫新手入门教学(二):爬取小说Python爬虫新手入门教学(三):爬取链家二手房数据Python爬虫新手入门教学(四):爬取前程无忧招聘信息Pyt.

JavaGUI实现科学计算器_逝眼云烟的博客-程序员宝宝

JavaGUI实现科学计算器一、设计思想界面及布局利用Java中awt、swing包里的工具对计算器布局设计(为了使运算可控,所以将文本区只能设为从Button输入)给每个Button加监听器对于数字和运算符Button,让其在文本行中显示算术表达式LogClear:清理历史记录LogTextEnable:对历史记录能否操作ButtonBackSpace、C:Back...

全网最详细黑苹果安装教程,一学就会的方法,赶快学起来吧_拒绝游泳的小鱼儿的博客-程序员宝宝_黑苹果安装

可以说:这是一套目前最全面的黑苹果安装教程,为了能让每个新手,更好的理解和掌握相关方法,教程按操作流程书写,新手请务必按顺序阅读,以便提高学习效率,高手可以随意观看,或者飘过。由于篇幅长度有限,一篇文章无法全部展现,更多具体内容请点击下方章节阅读。教程目录一、前言1,什么是黑苹果?二、硬件支持1,如何确认电脑是否支持安装黑苹果?三、准备工作1, 黑苹果安装必备工具下载2,黑苹果启动U盘制作方法​3, 配置EFI引导文件4,硬盘分区的设置方法​四、开始安装1,BIOS设置讲解!2,开

推荐文章

热门文章

相关标签