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

按照下面的方式来修改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文件，是已经被压缩过了

本文链接：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