当前位置: 首页 > news >正文

vue3 基础知识 ( webpack 基础知识)05

你好

文章目录

  • 一、组件
  • 二、如何支持SFC
  • 三、webpack 打包工具
  • 四、webpack 依赖图
  • 五、webpack 代码分包


一、组件

请添加图片描述
使用组件中我们可以获得非常多的特性:

  1. 代码的高亮;
  2. ES6、CommonJS的模块化能力;
  3. 组件作用域的CSS;
  4. 可以使用预处理器来构建更加丰富的组件,比如TypeScript、Babel、Less、Sass等

二、如何支持SFC

        事实上随着前端的快速发展,目前前端的开发越来越复杂了,比如我们需要通过 模块化开发 ,比如使用 高级的特性 来加快我么开发效率或者安全性,比如通过 es6 、ts 开发脚本逻辑,通过 cass、less 登方式来编写css样式;比如开发过程中,我们还希望 实时的监听文件的变化并反映到浏览器上 ,提升开发效率 ; 比如开发完成吼 需要将代码压缩、合并登其他优化 。 浏览器只能识别js 代码,但是不能解析这个模板,如果我们想要使用这一的SFC的.vue文件,比较常见的是两种方式:

  1. 使用Vue CLI来创建项目,项目会默认帮助我们配置好所有的配置选项,可以在其中直接使用.vue文件;
  2. 自己使用webpack或rollup或vite这类打包工具,对其进行打包处理;

很多开发者来说,并不需要思考这种问题,因为不管是vue react angular 都是借助脚手架cli帮我们打包的,事实上cli实际上是基于webpack 搭建的

三、webpack 打包工具


webpack 是一个静态的 模块化 打包 工具,为现代的 javaScript 应用程序

  1. 打包bundler : webpack可以将帮助我们进行打包,所以它是一个打包工具
  2. 静态的static : 这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器)
  3. 模块化module : webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等
  4. 现代的modern : 我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展

比如说vue 需要哪些打包呢?

  1. js 打包:es6转化为es5 ,ts转化为 js
  2. css处理: css模块的加载,处理;less sass 等预处理器的处理
  3. 资源文件img,font : 加载
  4. html:打包

package.jsom

        随着前端由多页面到单页面,由零散的文件到模块化开发,在每个项目中,都会用到打包工具,比如在使用 webpack,但是他实际上他就是一个 。在开发里,我们肯定不止一个包,包怎么进行管理呢? package.json 文件其实就是 包管理工具 ,对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

webpack 依赖于node环境,他是js编写的

webpack.config.js

        可以在这个文件里配置一些webpack 的相关信息

四、webpack 依赖图

  1. 事实上webpack 在处理应用程序时,会根据命令或者配置文件找到入口文件
  2. 从入口开始,会生成一个 依赖关系图 , 这个依赖图包括应用程序中所需的所有模块(js,css,img,font…)
  3. 然后遍历图结构,打包一个个模块(根据文件的不同,使用不同的loader来解析)
  4. 不会产生依赖冲突,如果已经加载过的会有个标记不会再次加载
    在这里插入图片描述

五、webpack 代码分包

相关文章:

vue3 基础知识 ( webpack 基础知识)05

你好 文章目录 一、组件二、如何支持SFC三、webpack 打包工具四、webpack 依赖图五、webpack 代码分包 一、组件 使用组件中我们可以获得非常多的特性: 代码的高亮;ES6、CommonJS的模块化能力;组件作用域的CSS;可以使用预处理器来…...

1.4亿X区智慧城市数字平台及城市大脑(运营中心)建设项目WORD

导读:原文《1.4亿X区智慧城市数字平台及城市大脑(运营中心)建设项目WORD》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 部分内…...

wps 画项目进度甘特图

效果如上 步骤一: 创建excel 表格 步骤二: 选中开始时间和结束时间两列数据,右键设置单元格格式 步骤三: 选择数值,点击确定,将日期转成数值。 步骤四:插入图表 选中任务,开始时间…...

【⑭MySQL | 数据类型(二)】字符串 | 二进制类型

前言 ✨欢迎来到小K的MySQL专栏,本节将为大家带来MySQL字符串 | 二进制类型类型的分享✨ 目录 前言5 字符串类型6 二进制类型总结 5 字符串类型 字符串类型用来存储字符串数据,还可以存储图片和声音的二进制数据。字符串可以区分或者不区分大小写的串比…...

Java smslib包开发

上一篇文章我详细介绍RXTXcomm的安装方法和简单代码,如果小伙伴涉及到需要使用手机短信模块完成短信收发需求的话,可以使用到smslib进行开发。 首先还是同样的,将整个smslib包源码导入项目,并且将它所需依赖一起进行导入 导入完成之后,我们就可以对smslib包进行二次开发了 下面…...

职业技术培训内容介绍

泰迪职业技术培训包括:Python技术应用、大数据技术应用、机器学习、大数据分析 、人工智能技术应用。 职业技术培训-Python技术应用 “Python技术应用工程师”职业技术认证是由工业和信息化部教育与考试中心推出一套专业化、科学化、系统化的人才考核标准&…...

AUTOSAR规范与ECU软件开发(实践篇)6.2 ETAS RTA系列工具入门

目录 1、 RTA系列工具安装方法 (1) ETAS RTA-RTE的安装方法 (2) ETAS RTA-BSW的安装方法...

vue3的hooks你可以了解一下

更详细的hooks了解参考这个大佬的文章:掘金:Hooks和Mixins之间的区别 刚开始我简单看了几篇文章感觉Hooks这个东西很普通,甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯…...

面试之HTTP

1.HTTP与HTTPS的区别 HTTP运行在TCP之上;HTTPS是运行在SSL之上,SSL运行在TCP之上两者使用的端口不同:HTTP使用的是80端口,HTTPS使用的是443端口安全性不同:HTTP没有加密,安全性较差;HTTPS有加密…...

测试框架pytest教程(3)夹具-@pytest.fixture

内置fixture Fixture使用pytest.fixture装饰,pytest有一些内置的fixture 命令可以查看内置fixture pytest --fixtures fixture范围 在pytest中,夹具(fixtures)具有不同的作用范围(scope),用于…...

GNU make系列之介绍Makefile

一.欢迎来到我的酒馆 在本章节介绍Makefile。 目录 一.欢迎来到我的酒馆二.GNU make 预览三.一个简单的Makefile四.make程序如何处理Makefile文件五.在Makefile中使用变量 二.GNU make 预览 2.1 GNU make工具会自动决定哪些程序需要被重新编译,并且执行相应的命令来…...

Java8新特性之——方法引用

文章目录 一、简介二、举例实例方法引用(实例对象::实例方法名)静态方法引用(类名::静态方法名)类成员方法引用(类名::实例方法名)构造方法引用(类名::new)数组构造方法引用&#xf…...

等保测评--安全区域边界--测评方法

安全子类--边界防护 a) 应保证跨越边界的访问和数据流通过边界设备提供的受控接口进行通信; 一、测评对象 网闸、防火墙、路由器、交换机和无线接入网关设备等提供访问控制功能的设备或相关组件 二、测评实施 1)应核查在网络边界处是否部署访问控制设备&#x…...

【Flutter】Flutter 使用 device_info_plus 获取设备的制造商、型号等信息

【Flutter】Flutter 使用 device_info_plus 获取设备的制造商、型号等信息 文章目录 一、前言二、安装和基本使用三、实际业务中的用法四、完整示例五、总结 一、前言 在这篇博客中,我将为你介绍一个非常实用的 Flutter 插件:device_info_plus。这个插件…...

Flink、Yarn架构,以Flink on Yarn部署原理详解

Flink、Yarn架构,以Flink on Yarn部署原理详解 Flink 架构概览 Apache Flink是一个开源的分布式流处理框架,它可以处理实时数据流和批处理数据。Flink的架构原理是其实现的基础,架构原理可以分为以下四个部分:JobManager、TaskM…...

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用 一、软件设计模式相关知识点二、摘要三、正文四、总结一、软件设计模式相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构...

CDH集群离线配置python3环境,并安装pyhive、impyla、pyspark

背景: 项目需要对数仓千万级数据进行分析、算法建模。因数据安全,数据无法大批量导出,需在集群内进行分析建模,但CDH集群未安装python3 环境,需在无网情况下离线配置python3环境及一系列第三方库。 采取策略&#xf…...

python并行操作(基于concurrent.futures.ThreadPoolExecutor)

文章目录 一、明确自身cpu可并行的核数二、根据所有任务计算在各个核上平均跑多少任务三、最后把任务划分在不同的核上跑四、拿来主义 此为利用cpu并行计算的能力,充分利用cpu在循环时并行计算。其实也是受C并行操作的影响,如果需要C版,可以移…...

Leetcode.73矩阵置零

给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法 class Solution {public void setZeroes(int[][] matrix) {int m matrix.length, n matrix[0].length;boolean[] row new boolean[m];boolean[] col…...

jdk 04 stream的collect方法

01.收集(collect) collect,收集,可以说是内容最繁多、功能最丰富的部分了。 从字面上去理解,就是把一个流收集起来,最终可以是收集成一个值也可以收集成一个新的集合。 collect主要依赖java.util.stream.Collectors类内置的静态方…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了,很多小伙伴想体验鸿蒙电脑版操作系统,可惜,鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机,来体验大家心心念念的鸿蒙系统啦!注意:虚拟…...

WebRTC调研

WebRTC是什么,为什么,如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...