Webpack插件浅析

常用的webpack插件功能介绍:

1.HotModuleReplacementPlugin

模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server,有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面,HMR是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的,在plugins配置项中直接使用即可。

const webpack = require('webpack')
plugins: [  new webpack.HotModuleReplacementPlugin(), // 热更新插件]

02、html-webpack-plugin

html-webpack-plugin的主要作用就是在webpack构建后生成html文件,同时把构建好入口js文件引入到生成的html文件中。

03、clean-webpack-plugin

clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件,它会根据output.path自动清理文件夹。

04 、mini-css-extract-plugin

css提取插件

产生背景:在进行打包时,css代码会打包到js中,不利于文件缓存

作用:依据每个entry生成单个css文件(将css从js中提取出来)

loader和plugins的区别:

  *  loader是文件加载器,能够加载资源文件,并对文件进行一些处理,如编译压缩 等,最终一起打包到指定的文件中。
  * plugin赋予了webpack各种灵活的功能,如打包优化资源管理环境变量注入等,目的是为了解决loader无法实现的功能

  从上图可以看出:

  *  loader运行在项目打包之前;

  * plugins运行在整个项目的编译时期;

 在Webpack运行的整个生命周期中会广播出许多事件,Plugin会监听这些事件,在合适的事件通过 webpack 提供的 api 改变输出结果。

对于 loader 而言,它实质上是一个转换器,将A文件编译成B文件,操作的是 文件 ,比如将A文件编译成B文件,单纯的是一个文件转换过程。

参考:webpack(四)——webpack里面的plugin和loader的区别 - 颗就完了 - 博客园 (cnblogs.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot集成axis发布WebService服务

文章目录 1、使用maven-web项目生成server-config.wsdd文件1.1、新建maven-web项目1.1.1、新建项目1.1.2、添加依赖 1.2、编写服务接口和实现类1.2.1、OrderService接口1.2.2、OrderServiceImpl实现类 1.3、配置deploy.wsdd文件deploy.wsdd文件 1.4、配置tomcat1.4.1、配置tomc…

C++ Webserver从零开始:基础知识(八)——多线程编程

线程概述 现代Linux系统主要使用的线程库是NPTL,在Linux中可以通过 getconf GNU_LIBPTHREAD_VERSION 获取Linux线程库版本。谈到线程,就不得不提及线程模型 线程模型 本小节概念较多,采用问答式进行讲解,以帮助读者理解 什么…

Matlab:利用1D-CNN(一维卷积神经网络),分析高光谱曲线数据或时序数据

1DCNN 简介: 1D-CNN(一维卷积神经网络)是一种特殊类型的卷积神经网络,设计用于处理一维序列数据。这种网络结构通常由多个卷积层和池化层交替组成,最后使用全连接层将提取的特征映射到输出。 以下是1D-CNN的主要组成…

详细分析Redis中数值乱码的根本原因以及解决方式

目录 前言1. 问题所示2. 原理分析3. 拓展 前言 对于这方面的相关知识推荐阅读: Redis框架从入门到学精(全)Java关于RedisTemplate的使用分析 附代码java框架 零基础从入门到精通的学习路线 附开源项目面经等(超全) …

在(龙芯 3A6000)loongnix下编译syncthing

在loongnix下编译syncthing Syncthing(https://syncthing.net/) 是一个开源的 P2P 文件同步工具,可用于在多个设备(包括 Android 手机)之间同步文件。 – Ankush Das(作者)。因为工作资料保存需…

板块零 IDEA编译器基础:第二节 创建JAVA WEB项目与IDEA基本设置 来自【汤米尼克的JAVAEE全套教程专栏】

板块零 IDEA编译器基础:第二节 创建JAVA WEB项目与IDEA基本设置 一、创建JAVA WEB项目(1)普通项目升级成WEB项目(2)创建JAVA包 二、IDEA 开荒基本设置(1)设置字体字号自动缩放 (2&am…

C# 根据USB设备VID和PID 获取设备总线已报告设备描述

总线已报告设备描述 DEVPKEY_Device_BusReportedDeviceDesc 模式 winform 语言 c# using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Window…

升级Oracle 单实例数据库19.3到19.22

需求 我的Oracle Database Vagrant Box初始版本为19.3,需要升级到最新的RU,当前为19.22。 以下操作时间为为2024年2月5日。 补丁下载 补丁下载文档参见MOS文档:Primary Note for Database Proactive Patch Program (Doc ID 888.1)。 补丁…

企业级Spring boot项目 配置清单

目录 一、服务基础配置 二、配置数据库数据源 三、配置缓存 四、配置日志 五、配置统一异常处理 六、配置swagger文档 七、配置用户登录模块 八、配置websocket 九、配置定时任务 十、配置文件服务器 十一、配置Nacos 十二、配置项目启动数据库默认初始化(liquibas…

Bootstrap5 图片轮播

Bootstrap5 轮播样式表使用的是CDN资源 <title>亚丁号</title><!-- 自定义样式表 --><link href"static/front/css/front.css" rel"stylesheet" /><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel"stylesheet"…

Meta开源大模型LLaMA2的部署使用

LLaMA2的部署使用 LLaMA2申请下载下载模型启动运行Llama2模型文本补全任务实现聊天任务LLaMA2编程Web UI操作 LLaMA2 申请下载 访问meta ai申请模型下载&#xff0c;注意有地区限制&#xff0c;建议选其他国家 申请后会收到邮件&#xff0c;内含一个下载URL地址&#xff0c;…

【翻译】Processing安卓模式的安装使用及打包发布(内含中文版截图)

原文链接在下面的每一章的最前面。 原文有三篇&#xff0c;译者不知道贴哪篇了&#xff0c;这篇干脆标了原创。。 译者声明&#xff1a;本文原文来自于GNU协议支持下的项目&#xff0c;具备开源二改授权&#xff0c;可翻译后公开。 文章目录 Install&#xff08;安装&#xff0…

1041.困于环中的机器人(Java)

题目描述&#xff1a; 在无限的平面上&#xff0c;机器人最初位于 (0, 0) 处&#xff0c;面朝北方。注意: 北方向 是y轴的正方向。 南方向 是y轴的负方向。 东方向 是x轴的正方向。 西方向 是x轴的负方向。 机器人可以接受下列三条指令之一&#xff1a; “G”&#xff1a;直走 …

42、WEB攻防——通用漏洞文件包含LFIRFI伪协议编码算法代码审计

文章目录 文件包含文件包含原理攻击思路文件包含分类 sessionPHP伪协议进行文件包含 文件包含 文件包含原理 文件包含其实就是引用&#xff0c;相当于C语言中的include <stdio.h>。文件包含漏洞常出现于php脚本中&#xff0c;当include($file)中的$file变量用户可控&am…

88 docker 环境下面 前端A连到后端B + 前端B连到后端A

前言 呵呵 最近出现了这样的一个问题, 我们有多个前端服务, 分别连接了对应的后端服务, 前端A -> 后端A, 前端B -> 后端B 但是 最近的时候 却会出现一种情况就是, 有些时候 前端A 连接到了 后端B, 前端B 连接到了 后端A 我们 前端服务使用 nginx 提供前端 html, js…

嵌入式软件bug分析基本要求

摘要&#xff1a;软件从来不是一次就能完美的&#xff0c;需要以包容的眼光看待它的残缺。那问题究竟为何产生&#xff0c;如何去除呢&#xff1f; 1、软件问题从哪来 软件缺陷问题千千万万&#xff0c;主要是需求、实现、和运行环境三方面。 1.1 需求描述偏差 客户角度的描…

Autovue R21.1 发布

作者: justin.jin 2023年9月, Oracle发布了最新版的Autovue R21.1, 它包括了原来21.0.1 和 21.0.2的全部补丁. Autovue R21.1的关键更新如下: 1, 升级为64位: 性能有较大提升, 不会有32位应用单一线程最大使用2G的内存限制. 2, 紧随IT基础架构的变化, 支持Windows Se…

Excel设置单元格下拉框(poi)

前言 年关在即&#xff0c;还在最后的迭代处理&#xff0c;还分了个其他同事的单&#xff0c;说是导出的Excel模版的2列要修改为下拉选项&#xff0c;过程很曲折&#xff0c;不说&#xff0c;以下其实就是一个笔记而已&#xff01; 其实之前分享过阿里的EasyExcel设置单…

jsp页面,让alert弹出信息换行显示

第一种方式&#xff1a;后端拼接上换行符前端显示 1&#xff0c;java后端将信息封装成字符串时&#xff0c;在需要换行的地方拼接上一个换行符&#xff0c; 显示在HTML中的换行&#xff0c;通常需要用<br>标签替代\n&#xff0c;如下&#xff1a; String javaString &…

【教程】ESP32-CAM使用I2C驱动0.91寸OLED

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 先安装库 1. 打开 Arduino IDE&#xff0c;然后转到 Sketch > Include Library > Manage Libraries。 2. 在搜索框中输入“SSD1306”&#xff0c;然后从 Adafruit 安装 SSD1306 库。 3. 选择“install al…