webpack5:基本概念整理

写在前头:这篇文章只是我个人在学习过程中对webpack文档的简单总结,更多详细信息请在官网阅读。

一、webpack是什么

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

静态打包工具:主要是指那些能够将多个JavaScript模块以及其他类型的静态资源(如CSS、图片、字体等)进行处理、转换、合并和优化,最终输出适合浏览器加载和执行的静态资源文件的工具。

​二、为什么要使用webpack

1.在没有打包工具时面临的问题

  1. 手工合并与压缩: 开发者需要手动将多个JavaScript文件合并成一个或几个大的文件,进行压缩,减少文件大小。CSS文件同样需要手动合并并使用CSS压缩工具进行优化。

  2. 依赖管理: 早期并没有成熟的模块化解决方案,大部分项目基于全局命名空间来管理依赖,或者使用如RequireJS这样的库来实现异步模块加载(AMD)。这种方式下,每个模块都需要手动指定其依赖关系,并且无法享受到现代模块化带来的诸多便利。

  3. 资源引用: 图片、字体等静态资源一般直接通过HTML标签进行引用,大量的HTTP请求会降低页面加载速度。为了改善这种情况,开发者可能会手动将小图片合并为雪碧图(CSS Sprite),或者使用CDN加速资源加载。

  4. 工作流复杂: 没有自动化工具的支持,开发流程中的构建、测试、发布等环节相对繁琐,容易出错且耗时较长。

2.webpack做了什么解决问题

  1. 模块化管理

    • Webpack 支持 CommonJS、AMD 和 ES6 模块规范,允许开发者按照模块化的方式组织项目结构,使得代码更具可维护性和可复用性。
    • 它能解析项目中的模块依赖关系,形成一个依赖图谱,确保各个模块按正确顺序加载和执行。
  2. 资源打包

    • Webpack 可以将项目中的所有 JavaScript、CSS、图片、字体等静态资源打包成一个或多个bundle文件,减少HTTP请求的数量,从而加快网页加载速度。
    • 支持代码分割和动态导入,允许异步加载模块,仅在需要时加载相应代码,优化首屏加载速度。
  3. 转换和编译

    • Webpack 通过Loader机制处理非JavaScript资源,如将ES6/7+/TypeScript代码转换为浏览器可识别的语法,将SCSS/Less等预处理器编写的样式转换为CSS,将React/Vue等模板文件转换为JS模块等。
  4. 优化与压缩

    • 提供多种优化策略,如Tree Shaking去除无用代码,UglifyJsPlugin或TerserPlugin压缩代码,SourceMap便于调试,SplitChunksPlugin提取公共代码等。
    • 支持资源指纹(hashing),避免客户端缓存问题。
  5. 插件系统与扩展性

    • Webpack有大量的内置插件和第三方插件,可以进行更高级别的构建定制,如HtmlWebpackPlugin生成HTML文件,CleanWebpackPlugin清理输出目录,CopyWebpackPlugin复制静态资源等。

三、核心概念

1.入口起点(entry points)

Webpack 的入口起点(entry point)是构建依赖图的起始位置。在 Webpack 中,入口起点是指定 Webpack 开始构建应用内部依赖关系图的初始模块。当你定义了一个或多个入口起点后(通常一个HTML文档一个起点),Webpack 会从这些起点出发,递归地解析并追踪所有直接和间接依赖的模块。这一过程最终将形成一个完整的依赖关系图(dependency graph),Webpack 将根据这个依赖图将所有模块打包成一个或多个 bundle 文件,以便在浏览器中高效加载和运行。

例如使用vue-cli搭建的vue项目的src目录下的main.js就是一个单页面应用的打包起点。

2.输出(output)

Webpack 的输出(Output)配置允许您定义编译后的资源(通常是捆绑包/bundle)如何命名、存储以及它们最终在硬盘上的位置。即通过配置打包成你想要的样子。

例如使用vue-cli搭建的vue项目中使用run build打包命令后生成的dist文件夹。

3.加载器(loader)

webpack中,loader的主要作用是对非JavaScript文件进行转换,使webpack能够处理它们。因为webpack默认只能处理JavaScript模块,所以当我们需要打包其他类型的文件(如CSS、图片、TypeScript、SCSS、LESS等)时,就需要使用相应的loader来预处理这些文件。

例如在使用vue-cli搭建的vue项目中的package-lock.json文件中,我们可以看到babel-loader(ES6+转ES5),ts-loader,css-loader等等。

4.plugin(插件)

Webpack 的插件(Plugin)是一种强大的工具,它们允许开发者深入到 Webpack 构建流程的核心,执行编译和打包之外的更多高级任务。Webpack 的构建过程由一系列有序的事件组成,而插件则可以通过监听这些事件并在适当的时机执行相应的操作来扩展和定制构建流程。

例如:HotModuleReplacementPlugin(启动热更新),DllPlugin(拆分 bundles,从而大幅减少构建时间)。

5.模块(Moudules)

在模块化编程中,开发者将程序分解为功能离散的 chunk,并称之为 模块。项目中的每个文件都是一个模块。

6.依赖图

每当一个文件依赖另一个文件时,webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源,如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。

Webpack从命令行或配置文件中定义的一个或多个入口点(entry point)开始,递归地分析这些入口点所依赖的其他模块。它会遍历整个项目的文件结构,找到所有相关的依赖项,并将它们组织成一个依赖图。Webpack的依赖图是其实现模块打包和优化的关键机制。

7.模块热替换(hot module replacement)

Webpack的模块热替换(Hot Module Replacement,简称HMR)是webpack提供的一个强大特性,它允许在运行时更新各种模块,而无需进行完全刷新。这极大地提升了开发效率,尤其是在开发复杂的单页面应用(SPA)时。

当源文件发生变化时,webpack会重新构建模块,并与浏览器之间建立一个WebSocket连接。通过这个连接,webpack将新的模块发送到浏览器端,浏览器端接收到新的模块后,通过HMR runtime来替换掉旧的模块。在这个过程中,当前页面的状态会被保留,比如页面的滚动位置、已输入的内容等都不会丢失。

四、总结

webpack通过模块化管理,构建一个模块依赖图,进行代码分割和支持动态导入(import)让模块可以按需加载;将代码进行转换和编译,让浏览器能识别;webpack对代码进行压缩和优化,提升加载速度;提供了模块热替换,为开发提高了效率和使用体验。

参考文档

webpack

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

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

相关文章

鸡肋的Git

1.前言 对于大多数开发人员来说,我们大多数在学习或者工作过程中只关注核心部分,比如说学习Java,可能对于大多数人而言一开始都是从Java基础学起,然后408,Spring,中间件等,当你发现很多高深的技…

开源的Java报表库JasperReports介绍

JasperReports 是一个流行的开源 Java 报表库,它允许开发人员创建丰富的、基于 Java 的报表,这些报表可以与多种数据源交互,并且可以很容易地集成到 Java 应用程序中。JasperReports 提供了丰富的功能,包括数据可视化、图表、子报…

Node.js与Webpack笔记(二)

上一篇:Node.js与Webpack笔记(一)-CSDN博客 Webpack模块打包工具 1.Webpack简介以及体验 webpack是一个静态模块打包工具,从入口构建依赖图,打包有关的模块,最后用于展示你的内容 静态模块:编写…

vue结合vue-electron创建应用程序

这里写自定义目录标题 安装electron第一种方式:vue init electron-vue第二种方式:vue add electron-builder 启动electron调试功能:background操作和使用1、覆盖窗口的菜单上下文、右键菜单2、监听关闭事件、阻止默认行为3、创建悬浮窗口4、窗…

css 背景图片居中显示

background 简写 background: #ffffff url(https://profile-avatar.csdnimg.cn/b9abdd57de464582860bf8ade52373b6_misnice.jpg) center center / 100% no-repeat;效果如图:

关于手机是否支持h264的问题的解决方案

目录 现象 原理 修改内容 现象 开始以为是手机不支持h264的编码 。机器人chatgpt一通乱扯。 后来检查了下手机,明显是有h264嘛。 终于搞定,不枉凌晨三点起来思考 原理 WebRTC 默认使用的视频编码器是VP8和VP9,WebRTC内置了这两种编码器…

Centos 安装 redis【最简单】

Centos7 使⽤ yum 安装 ⾸先安装 scl 源, 再安装 redis (因为 Centos7 yum 提供的软件包只有 3.0 版本的 Redis ,太老了,我们要安装 redis 5 系列的) yum install centos-release-scl-rh yum install rh-redis5-redis 创建符号…

15-单片机烧录FreeTOS操作系统后,程序的执行流程

任务创建 1、在系统上电后,第一个执行的是启动文件由汇编语言编写的复位函数 通过复位函数来初始化系统的时钟,然后再执行__main,初始化系统的堆和栈,然后跳转到main函数 2、在main函数中可以直接进行任务创建操作 因为在FreeRTOS中会自动…

GSEA -- 学习记录

文章目录 brief统计学原理部分其他注意事项转录组部分单细胞部分 brief 上一篇学习记录写了ORA,其中ORA方法只关心差异表达基因而不关心其上调、下调的方向,也许同一条通路里既有显著高表达的基因,也有显著低表达的基因,因此最后…

3.7号freeRtoS

1. 串口通信 配置串口为异步通信 设置波特率,数据位,校验位,停止位,数据的方向 同步通信 在同步通信中,数据的传输是在发送端和接收端之间通过一个共享的时钟信号进行同步的。这意味着发送端和接收端的时钟需要保持…

视频编解码技术介绍 - 基本概念篇

第一章 视频编解码技术介绍 - 基本概念篇 文章目录 前言1. 我的疑问1.1 什么是视频编解码技术1.2 为什么会有视频编解码技术1.3 视频编解码中有哪些核心技术1.4 作为开发者需要重点了解视频编解码中的哪些技术 2. 视频编解码的历史3. 基本概念3.1 像素3.2 分辨率3.3 ppi(像素密…

CorelDRAW下载2024最新版专业的平面设计软件,专注于矢量图形编辑与排版

CorelDRAW是一款功能强大的矢量图形设计软件,广泛应用于标志设计、插画绘制、排版印刷、VI设计、包装设计、网页制作等众多领域。它提供了丰富的绘图工具和特效,使用户能够轻松地创建和编辑复杂的矢量图形。CorelDRAW还支持导入和导出多种文件格式&#…

RabbitMQ 安装使用

文章目录 RabbitMQ 安装使用安装下载 Erlang下载 RabbitMQ 的服务安装好后看是否有 RabbitMQ 的服务开启管理 UIRabbitMQ 端口使用一览图 使用输出最简单的 Hello World!生产者定义消费者消费消息小拓展 RabbitMQ 安装使用 安装 下载 Erlang RabbitMQ 是用这个语…

【机器学习300问】30、准确率的局限性在哪里?

一、什么是准确率? 在解答这个问题之前,我们首先得先回顾一下准确率的定义,准确率是机器学习分类问题中一个很直观的指标,它告诉我们模型正确预测的比例,即 还是用我最喜欢的方式,举例子来解释一下&#xf…

倒计时35天

dp预备(来源:b站acm刘春英老师) 1. 2. 3. 4. 5. 6. 7.

13:大数据与Hadoop|分布式文件系统|分布式Hadoop集群

大数据与Hadoop|分布式文件系统|分布式Hadoop集群 Hadoop部署Hadoop HDFS分布式文件系统HDFS部署步骤一:环境准备HDFS配置文件 查官方手册配置Hadoop集群 日志与排错 mapreduce 分布式离线计算框架YARN集群资源管理系统步骤一:安装…

spring boot 集成 mysql ,mybatisplus多数据源

1、需要的依赖&#xff0c;版本自行控制 <dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId> </dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java<…

初阶数据结构之---二叉树的顺序结构-堆

引言 今天要讲的堆&#xff0c;不是操作系统虚拟进程地址空间中&#xff08;malloc&#xff0c;realloc等开空间的位置&#xff09;的那个堆&#xff0c;而是数据结构中的堆&#xff0c;它们虽然名字相同&#xff0c;却是截然不同的两个概念。堆的底层其实是完全二叉树&#x…

【spark operator】spark operator动态分配executor

背景&#xff1a; 之前在使用spark operator的时候必须指定executor的个数&#xff0c;在将任务发布到spark operator后&#xff0c;k8s会根据指定的个数启动executor&#xff0c;但是对于某些spark sql可能并不需要用到那么多executor&#xff0c;在此时executor的数量就不好…

Python快速入门系列-1

Python快速入门系列 第一章: Python简介1.1 Python的历史与发展1.2 Python的优势与特点1.2.1 易学易用1.2.2 动态类型1.2.3 丰富的标准库与第三方库1.2.4 面向对象与函数式编程1.2.5 广泛应用领域 1.3 Python的应用领域 第一章: Python简介 1.1 Python的历史与发展 Python是一…