webpack一些常用的Loader和Plugin

文章目录

    • webpack4一些常用的Loader:
    • webpack4一些常用的Plugin:
    • 关于webpack5的一些特点:
      • 新增特性:
      • 修复的问题:
      • 内置模块和工具:
    • 关于webpack5的一些内置:
      • 内置Loader:
      • 内置Plugin:

webpack4一些常用的Loader:

  • babel-loader: 将ES6转化为ES5。
  • ts-loader: 将TypeScript转化为JavaScript
  • vue-loader: 将Vue转化为JavaScript
  • eslint-loader: 通过 ESLint 检查 JavaScript 代码。
  • css-loader: 加载 CSS,⽀持模块化、压缩、⽂件导⼊等特性。
  • style-loader: 把 CSS 代码注⼊到 JavaScript 中,通过 DOM 操作去加载 CSS。
  • less-loader : 将Less编译成CSS。
  • sass-loader: 将Sass编译成CSS。
  • postcss-loader : 使用PostCSS处理CSS。
  • file-loader: 把⽂件输出到⼀个⽂件夹中,在代码中通过相对 URL 去引⽤输出的⽂件。
  • url-loader: 和 file-loader 类似,但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。
  • image-loader: 载并且压缩图⽚⽂件。
  • source-map-loader: 加载额外的 Source Map ⽂件,以⽅便断点调试。
  • cache-loader : 为其他 loader 提供缓存功能,避免重复执行。
  • thread-loader: 将 loader 的执行过程放在单独的 worker 池中运行,来减少主线程的压力,提高构建速度。

webpack4一些常用的Plugin:

  • CleanWebpackPlugin: 用于在每次构建前清理输出目录中的文件
  • CompressionWebpackPlugin: 用于对打包后的资源文件进行gzip
  • HtmlWebpackPlugin: 用于生成HTML文件,并将打包后的资源文件自动引入
  • MiniCssExtractPlugin: 用于将CSS提取为单独的文件
  • DefinePlugin: 用于定义环境变量
  • UglifyJsPlugin: 用于丑化压缩JavaScript
  • CopyWebpackPlugin: 用于将静态文件直接复制到输出目录中
  • HotModuleReplacementPlugin: 用于实现模块热替换
  • FriendlyErrorsWebpackPlugin: 用于友好的展示webpack构建错误信息
  • webpack-bundle-analyzer: 用于可视化分析打包后模块的大小和依赖

关于webpack5的一些特点:

Webpack5相对于Webpack4来说,新增了很多特性和功能,修复了一些问题,同时也内置了一些新的模块和工具。以下是一些主要的区别:

新增特性:

  • 内置静态资源构建能力: Webpack5通过添加4种新的资源模块类型(asset/resource、asset/source、asset等),来替换所有的loader,如raw-loader、url-loader和file-loader等。
  • 性能优化: Webpack5相对于Webpack4来说,性能更高,打包速度更快。
  • 更好的Tree Shaking: Webpack5提供了更好的Tree Shaking功能,可以更准确地识别和消除无用的代码,从而减小打包体积。

修复的问题:

  • 长期缓存问题: Webpack4中,由于模块ID的不稳定性,导致长期缓存失效。Webpack5通过采用更稳定的模块ID生成策略,解决了这个问题。
  • 配置复杂性问题: Webpack4的配置相对复杂,容易出错。Webpack5通过简化配置和提供更多的默认配置选项,降低了配置的复杂性。

内置模块和工具:

  • 内置优化插件: Webpack5内置了一些优化插件,如ModuleConcatenationPlugin和SplitChunksPlugin等,用于优化打包结果和减小打包体积。
  • 内置环境变量: Webpack5内置了一些环境变量,如process.env.NODE_ENV,用于指示当前的环境(开发环境或生产环境)。

此外,Webpack5还相对于Webpack4来说,支持更多的JavaScript新特性、更好的缓存机制等。


关于webpack5的一些内置:

在Webpack 5中,一些常用的loader和plugin被内置,这意味着你不再需要显式地在配置文件中安装和配置它们。以下是一些在Webpack 4中可能需要单独安装,但在Webpack 5中被内置的loader和plugin:

内置Loader:

  • style-loader:在Webpack 5中,style-loader被内置为实验性功能。它允许你将CSS样式直接注入到HTML中。
  • css-loader:用于解析CSS文件中的@import和url()等依赖关系。在Webpack 5中,css-loader也被内置为实验性功能。
  • mini-css-extract-plugin:这个plugin在Webpack 5中被内置为asset/style模块类型。它用于从bundle中提取CSS到单独的文件。

内置Plugin:

  • HtmlWebpackPlugin:这个plugin在Webpack 5中仍然需要单独安装,但Webpack 5为其提供了更好的集成和默认行为。它用于简化HTML文件的创建,并自动引入生成的bundle。
  • TerserPlugin:用于压缩和最小化JavaScript代码。在Webpack 5中,TerserPlugin被内置为生产环境的默认压缩工具。

这里就说几个常见的,其他更多的去webpack5官网看吧

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

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

相关文章

基于Springboot的预报名管理系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的预报名管理系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&a…

用miniconda建立PyTorch、Keras、TensorFlow三个环境

一、配置清华镜像conda源 由于网络问题,直接使用conda默认的源下载包可能会非常慢。为了解决这个问题,可以配置国内镜像源来加速包的下载。清华大学TUNA协会提供了一个常用的conda镜像源。下面是如何配置清华镜像源的步骤: 1. 配置清华conda…

发布DDD脚手架到Maven仓库,IntelliJ IDEA 配置一下即可使用

作者:小傅哥 博客:https://bugstack.cn 项目:https://gaga.plus 沉淀、分享、成长,让自己和他人都能有所收获!😄 大家好,我是技术UP主,小傅哥。 这篇文章将帮助粉丝伙伴们更高效地利…

使用 Jenkins 和 Spinnaker 构建 Kubernetes CI/CD

无论您是新手还是持续集成和持续交付以及容器化领域的经验丰富,本文都将为您提供设置 Spinnaker 以满足您的软件应用程序交付需求的基本知识。 了解 Jenkins、Spinnaker 和 Kubernetes Kubernetes 和 Jenkins 是两个强大的工具,它们相互配合&#xff0…

Head First Design Patterns - 命令模式

什么是命令模式 命令模式,把请求封装成对象,以便使用不同的请求、队列或者日志请求来参数化其他对象,并支持可撤回的操作。 为什么会有命令模式 假设要设置一个遥控器,遥控器需要控制多个设备,每个设备除了开关&#…

uniapp微信小程序 隐藏顶部导航栏 路由跳转带参数

隐藏单页顶部导航栏和左上角返回按钮,在pages.json里配置 {"path": "pages/gameLogin/gameLogin","style": {"navigationStyle":"custom","app-plus":{"titleView":false}} } 路由跳转 u…

ARM64汇编06 - 基本整型运算指令

ADD (immediate) 将 Xn 与 imm 相加,结果赋值给 Xd,imm 是无符号数,范围为 0 - 4095。 shift 是对 imm 进行移位,shift 为 0 的时候,表示左移 0 位,即不变。shift 为 1 的时候,表示左移12 位&a…

Linux的MySQL安装与卸载

安装与卸载 卸载安装配置yum源安装MySQL 声明一下本人用的Linux版本是CentOs7.9版本的。 卸载 如果我们用的云服务器,云服务器可能会自带MySQL或者mariadb(其实就是MySQL的一个开源分支),如果我们不想用自带的,需要先…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的水下目标检测系统(深度学习模型+UI界面+训练数据集)

摘要:本研究详述了一种采用深度学习技术的水下目标检测系统,该系统集成了最新的YOLOv8算法,并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别水…

【C++教程从0到1入门编程】第八篇:STL中string类的模拟实现

一、 string类的模拟实现 下面是一个列子 #include <iostream> namespace y {class string{public: //string() //无参构造函数// :_str(nullptr)//{}//string(char* str) //有参构造函数// :_str(str)//{}string():_str(new char[1]){_str[0] \0;}string(c…

图论(蓝桥杯 C++ 题目 代码 注解)

目录 迪杰斯特拉模板&#xff08;用来求一个点出发到其它点的最短距离&#xff09;&#xff1a; 克鲁斯卡尔模板&#xff08;用来求最小生成树&#xff09;&#xff1a; 题目一&#xff08;蓝桥王国&#xff09;&#xff1a; 题目二&#xff08;随机数据下的最短路径&#…

爬虫练习:获取某网站高清壁纸

一、相关网站 二、查看robots.txt 三、相关代码 import requests from lxml import etree import osheaders {user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 } #发送请求 list_url https:/…

stm32使用时钟生成PWM时调用__HAL_TIM_SetAutoreload导致PWM消失处理

stm32使用时钟生成PWM时调用__HAL_TIM_SetAutoreload导致PWM消失处理 这一个是配置的时候没有使用影子寄存器导致的, 如果加载的Autoreload的值比原来的这一个值小, 这是会出现一个问题, 如果计数器里面的值记为Count, 如果改变的时候New_Autoreload < Count < Old_Auto…

掌控逻辑流动之美:Python中的条件语句与循环结构深度解析与实战演练

在Python编程的海洋中&#xff0c;条件语句与循环就像是舵手手中的罗盘和船桨&#xff0c;指引着程序执行的方向与节奏。掌握好这两类控制结构&#xff0c;无疑能让您的代码更具智慧与灵动性。本文将深入浅出地介绍Python中的条件语句&#xff08;if-elif-else&#xff09;与循…

CCCorelib 点云球形特征(CloudCompare内置算法库)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里基于每个点的邻域协方差来获取点云中具有的球形几何特征的点,计算方式如下图所示: 二、实现代码 // CloudCompare #include <CCCoreLib/PointCloudTpl.h> #include <CCCoreLib/

C++:[NWRRC2015] Concatenation(洛谷)P7050

题目描述 Famous programmer Gennady likes to create new words. One way to do it is to concatenate existing words. That means writing one word after another. For example, if he has words cat and dog, he would get a word catdog, that could mean something lik…

【系统安全】浅谈保障接口安全的10种技术手段

接口安全是系统稳定亘古不变的道理&#xff0c;作为程序员可以从哪些方面下手呢&#xff1f; 注&#xff1a;因为一些原因&#xff0c;突然想总结接口安全的重要性。之前写过类似的文章&#xff0c;今天增加一些案例总结其应用场景。 1、接口传输加密&#xff0c;不单单依赖h…

spring-boot操作elasticsearch

一、环境准备 springboot与elasticsearch的更新都非常快&#xff0c;为了避免兼容性问题&#xff0c;要注意下选择的版本问题。具体的可参考官网 --> springboot与elasticsearch版本兼容性 1.1导入依赖 <dependencies><dependency><groupId>org.spring…

深度学习基础知识之通道数channels

大多数的深度学习模型&#xff0c;模型上会展示图片的尺寸&#xff0c;如&#xff1a;352x352x3 这里面352x352表示的是像素大小&#xff0c;即高和宽都为352个像素&#xff0c;而3表示的是通道数&#xff0c;指输入的是3通道的RGB图像&#xff0c;每个颜色通道的取值范围为0-2…

中间件面试题之ElasticSearch

ElasticSearch相关面试题 此题是xx位面试题 (1)有两个机房,每个机房两台服务器,总共有4台服务器搭建的ES集群,怎么控制所有副本在一个机房或者某些节点里面。 可以通过打标签的形式,指定哪些索引的主分片在哪个节点上。 首先指定节点的类型: ## 指定节点类型 方式 …