vue3 基础知识 ( webpack 基础知识)05
你好
文章目录
- 一、组件
- 二、如何支持SFC
- 三、webpack 打包工具
- 四、webpack 依赖图
- 五、webpack 代码分包
一、组件
使用组件中我们可以获得非常多的特性:
- 代码的高亮;
- ES6、CommonJS的模块化能力;
- 组件作用域的CSS;
- 可以使用预处理器来构建更加丰富的组件,比如TypeScript、Babel、Less、Sass等
二、如何支持SFC
事实上随着前端的快速发展,目前前端的开发越来越复杂了,比如我们需要通过 模块化开发
,比如使用 高级的特性
来加快我么开发效率或者安全性,比如通过 es6 、ts
开发脚本逻辑,通过 cass、less
登方式来编写css样式;比如开发过程中,我们还希望 实时的监听文件的变化并反映到浏览器上
,提升开发效率 ; 比如开发完成吼 需要将代码压缩、合并登其他优化 。 浏览器只能识别js 代码,但是不能解析这个模板,如果我们想要使用这一的SFC的.vue文件,比较常见的是两种方式:
- 使用Vue CLI来创建项目,项目会默认帮助我们配置好所有的配置选项,可以在其中直接使用.vue文件;
- 自己使用webpack或rollup或vite这类打包工具,对其进行打包处理;
很多开发者来说,并不需要思考这种问题,因为不管是vue react angular 都是借助脚手架cli帮我们打包的,事实上cli实际上是基于webpack 搭建的
三、webpack 打包工具
webpack 是一个
静态的
模块化
打包 工具
,为现代的 javaScript 应用程序
- 打包bundler : webpack可以将帮助我们进行打包,所以它是一个打包工具
- 静态的static : 这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器)
- 模块化module : webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等
- 现代的modern : 我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展
比如说vue 需要哪些打包呢?
- js 打包:es6转化为es5 ,ts转化为 js
- css处理: css模块的加载,处理;less sass 等预处理器的处理
- 资源文件img,font : 加载
- html:打包
package.jsom
随着前端由多页面到单页面,由零散的文件到模块化开发,在每个项目中,都会用到打包工具,比如在使用 webpack,但是他实际上他就是一个 包 。在开发里,我们肯定不止一个包,包怎么进行管理呢? package.json 文件其实就是 包管理工具 ,对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。
webpack 依赖于node环境,他是js编写的
webpack.config.js
可以在这个文件里配置一些webpack 的相关信息
四、webpack 依赖图
- 事实上webpack 在处理应用程序时,会根据命令或者配置文件找到入口文件
- 从入口开始,会生成一个 依赖关系图 , 这个依赖图包括应用程序中所需的所有模块(js,css,img,font…)
- 然后遍历图结构,打包一个个模块(根据文件的不同,使用不同的loader来解析)
- 不会产生依赖冲突,如果已经加载过的会有个标记不会再次加载
五、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)数组构造方法引用…...
等保测评--安全区域边界--测评方法
安全子类--边界防护 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环境及一系列第三方库。 采取策略…...
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类内置的静态方…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...

用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...

C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...

【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...

Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...