字节跳动青训营--Webpack
文章目录
- 前言
- 一、为什么要学习Webpack?
- 二、什么是Webpack?
- 1. 产生背景
- 2. 基础概念
- 三、使用Webpack
- 1. 安装
- 2. 编辑配置文件
- 3. 执行编译命令
- 核心流程
- 四、如何使用Webpack
- 流程类配置
- 配置总览
- 五、理解Loader
- 六、理解插件
- 插件钩子
- 课外关注资料
前言
此文章仅用来记录学习。
一、为什么要学习Webpack?
- 理解前端
工程化
概念、工具、目标 - 一个团队总要有那么几个人熟悉Webpack,某种程度省可以成为个人的核心竞争力
- 高阶前的段必经之路
二、什么是Webpack?
1. 产生背景
在过去主要是通过手动管理这些资源,这会导致出现大量的问题:
- 依赖手工,比如有50个JS文件…操作,过程繁琐
- 当代码文件之间有依赖的时候,就得严格按依赖顺序书写
- 开发与生产环境一致,难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、cSS资源管理模型不一致
由于上诉问题的出现,就衍生出了很多现代化工具:webpack,vite,rollup,gulp等等
2. 基础概念
概念:用于现代 JavaScript 应用程序的静态模块打包工具
- 多份资源文件打包成一个 Bundle支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
- …
三、使用Webpack
1. 安装
npm i -D webpack webpack-cli
2. 编辑配置文件
module.exports = {optimization:{minimize: false // 关闭代码压缩,可选},entry: "./src/index.ts",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",environment: {arrowFunction: false // 关闭webpack的箭头函数,可选}},module: {rules: [{test: /\.ts$/,use: {loader: "ts-loader" },exclude: /node_modules/}]}
}
3. 执行编译命令
npx webpack
核心流程
webpack本质上所作的事情
- 多个文件资源合并成一个,减少 http 请求数
- 支持模块化开发支持高级 JS 特性
- 支持 Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- Etc…
四、如何使用Webpack
关于 Webpack 的使用方法,基本都围绕“配置展开,而这些配置大致可划分为两类:
- 流程类: 作用于流程中某个 or 若千个环节直接影响打包效果的配置项
- 工具类:主流程之外,提供更多工程化能力的配置项
流程类配置
配置总览
webpack官方配置文档
五、理解Loader
步骤:
- less-loader:实现 less => css 的转换
- css-loader: 将 CSS 包装成类似 module.exports =“$[css”的内容,包装后的内容符合 JavaScript 语法
- style-loader: 将 css 模块包进 require 语句,并在运行时调用 iniectStyle 等函数将内容注入到页面的 style 标签
特点:
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常见Loader:
六、理解插件
由上可知,这是一个特别复杂的过程,那么这就牵扯到了一系列的问题:
- 新人需要了解整个流程细节,上手成本高
- 功能迭代成本高,牵一发动全身
- 功能僵化,作为开源项目而言缺乏成长性…
心智成本高 => 可维护性低 => 生命力弱
插件架构精髓:对扩展开发,对修改封闭
插件钩子
钩子的核心信息:
- 时机: 编译过程的特定节点,Webpack 会以钩子形式通知插件此刻正在发生什么事情
- 上下文: 通过 tapable 提供的回调机制,以参数方式传递上下文信息
- 交互: 在上下文参数对象中附带了很多存在side effect 的交互接口,插件可以通过这些接口改变
课外关注资料
webpack官方配置文档
CSS编译:
css-loader
style-loader
Babel:
babel-loader
babel官网
@babel/preset-env
@babel/preset-react
@babel/preset-typescript
Html
Html-webpack-plugin
HMR
HMR 原理全解析
Loader
如何编写loader
插件
Webpack 插件架构深度讲解
一文吃透 Webpack 核心原理
相关文章:

字节跳动青训营--Webpack
文章目录前言一、为什么要学习Webpack?二、什么是Webpack?1. 产生背景2. 基础概念三、使用Webpack1. 安装2. 编辑配置文件3. 执行编译命令核心流程四、如何使用Webpack流程类配置配置总览五、理解Loader六、理解插件插件钩子课外关注资料前言 此文章仅用…...
微信多媒体文件speex格式转为mp3文件格式
1、安装speex环境 wget https://ftp.osuosl.org/pub/xiph/releases/speex/speex-1.2.0.tar.gz tar -zxvf speex-1.2.0.tar.gz -C /usr/local/ cd /usr/local/speex-1.2.0/ ./configure make make install 2、配置path到/usr/lib 因为安装的speex生成的可执行文件默认在/usr…...

IAP初探
IAP(In-Application Programming)在应用编程,浅显易懂,按照字面意思即是在程序不关闭情况下,对应用进行再次写入程序,对程序的写入需要传输数据,而传输数据的前提是通信, IAP对代码进行更新可以简要分为以…...

【组织架构】中国铁路兰州局集团有限公司
1 公司简介 中国铁路兰州局集团有限公司,是中国国家铁路集团有限公司管理的18个铁路局集团有限公司之一,简称“兰局”。经过59年的发展,现已成为西北地区最大的交通运输企业之一,形成了以兰州为枢纽,由陇海铁路、包兰铁…...

【计算机三级网络技术】 第四篇 路由设计技术基础
文章目录一、分组转发二、路由选择1.理想的路由算法的基本特征2.路由算法的度量标准3.路由算法分类:4.IP路由选择与路由汇聚(重点)三、自治系统与Internet的路由选择协议1.自治系统2.路由选择协议的分类四、内部网关协议1.RIP的基本概念2.RIP的原理3.RIP的运行过程五…...
嵌入式工程师进阶,基于AM64x开发板的IPC多核开发案例分享
前 言 本文档主要说明AM64x基于IPC的多核开发方法。默认使用AM6442进行测试演示,AM6412测试步骤与之类似。 适用开发环境如下: Windows开发环境:Windows 7 64bit、Windows 10 64bit 虚拟机:VMware15.5.5 Linux开发环境:Ubuntu 18.04.4 64bit Linux Processor SDK:ti-proc…...

腾讯安全与锐捷网络战略合作,威胁情报能力“被集成”
2月28日,腾讯安全和锐捷网络在北京联合举办“威胁情报”战略合作发布会。双方发布了一款集成了腾讯安全威胁情报的新一代防火墙,并举办战略合作签约仪式。会上,锐捷网络安全产品事业部总经理项小升、腾讯安全总经理陈龙代表双方签署战略合作协…...

接口自动化测试用例详解
phpunit 接口自动化测试系列 Post接口自动化测试用例 Post方式的接口是上传接口,需要对接口头部进行封装,所以没有办法在浏览器下直接调用,但是可以用Curl命令的-d参数传递接口需要的参数。当然我们还以众筹网的登录接口为例,讲…...

【数据库增删查改进阶版】保姆级教程带大家去学习更加复杂的sql语句,各种各样的约束以及各种各样的查询
前言: 大家好,我是良辰丫🍅🍅🍅,上一篇数据库我们一起学习了基础版本的增删查改,今天我们将接触更高级的增删查改,主要是学习一些约束条件,你们准备好了嘛?开…...

【C#基础】C# 正则表达式
序号系列文章7【C#基础】C# 常用数据结构8【C#基础】C# 面向对象编程9【C# 基础】C# 异常处理操作文章目录前言1,Regex 的概念2,Regex 的创建3,Regex 常用操作4,Regex 类的使用5,学习资源推荐结语前言 🌼 h…...

企业活动直播如何设置VIP观看席?
阿酷tony / 2023-2-28 / 长沙 / 多图内容企业活动直播如何设置VIP观看席?有意思吧,直播也能设vip席位。在直播间可以分设尊享嘉宾席、特邀VIP以及观众席三个区域,为企业提供多种用户接待模式,不仅能为嘉宾营造尊享VIP体验…...

线性代数学习-2
线性代数学习-2矩阵消元消元回代消元矩阵置换矩阵逆矩阵本文转载于https://herosunly.blog.csdn.net/article/details/88713747 该文章本人认为十分有用,便自己敲一遍笔记加固印象原文链接 原文这个笔记感觉比我老师讲的更加透彻,清晰。很好的展示了线性…...
Java 类
Java类是Java编程语言中的基本概念之一,用于描述对象的属性和方法。本文将详细介绍Java类的作用、定义和使用,以及在实际工作中的应用。 什么是Java类? Java类是一种用于描述对象的模板或蓝图。它定义了一个对象的属性和方法,以…...

GO中sync 包的 RWMutex 读写互斥锁
文章目录背景RWMutex 简介代码验证多个协程请求读锁 RLock() 和 RLock()读写交错 RLock() 和 Lock()写入的时候读取读取的时候写入请求多个写Lock() 和 Lock()背景 Mutex 互斥锁是严格锁定读和写,如果我们需要单独对读或者写添加锁需要使用 sync包的RWMutex 针对读…...

糖化学试剂55520-67-7,5-vinyl-2-deoxyuridine,5-乙烯基-2-脱氧尿苷特点分析说明
5-vinyl-2-deoxyuridine(5-VdU),5-vinyl-2-deoxyuridine,5-Vinyldeoxyuridine5-乙烯基-2-脱氧尿苷 | CAS:55520-67-7 | 纯度:95%试剂信息:CAS:55520-67-7所属类别:糖化学分子量:C11H…...

五年携手共话,FISCO BCOS为数实相生注入新动能
2月24日,作为深圳国际金融科技节系列活动之一,由深圳市地方金融监督管理局指导,微众银行、金链盟主办的“2022产业区块链年度峰会暨FISCO BCOS五周年生态大会”(下称“大会”)在深圳顺利召开。本次大会以“数实相生&am…...
特征可视化技术t-SNE
特征可视化技术t-SNE 一、理论介绍 想要了解t-SNE的数学原理可以参考t-SNE完整笔记 关于t-SNE的使用过程中有以下几点需要注意: t-SNE算法并不是每次都能产生相似结果。 t-SNE算法使得距离的概念适应于数据集中的区域密度变化。因此,它自然而然地扩大…...

.NET 导入导出Project(mpp)以及发布后遇到的Com组件问题
最近公司项目有一个对Project导入导出的操作,现在市面上能同时对Project进行导入导出的除了微软自带的Microsoft.Office.Interop.MSProject,还有就是Aspose.Tasks for .NET。但因为后者是收费软件且破解版的现阶段只到18.11,只支持.net Frame…...
centos 8安装配置 yum/dnf镜像源 以及 docker相关操作
Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 Docker组成部分: 镜…...

java基础之线程池
线程池1.线程池1.1 线程状态介绍1.2 线程池-基本原理1.3 线程池-Executors默认线程池1.4 线程池-Executors创建指定上限的线程池1.5 线程池-ThreadPoolExecutor1.6 线程池-参数详解1.7 线程池-非默认任务拒绝策略2. 原子性2.1 volatile-问题2.2 volatile解决2.3 synchronized解…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...