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

字节跳动青训营--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:
在这里插入图片描述

六、理解插件

> 常用
由上可知,这是一个特别复杂的过程,那么这就牵扯到了一系列的问题:

  • 新人需要了解整个流程细节,上手成本高
  • 功能迭代成本高,牵一发动全身
  • 功能僵化,作为开源项目而言缺乏成长性…

心智成本高 => 可维护性低 => 生命力弱

插件架构精髓:对扩展开发,对修改封闭

插件钩子

钩子的核心信息:

  1. 时机: 编译过程的特定节点,Webpack 会以钩子形式通知插件此刻正在发生什么事情
  2. 上下文: 通过 tapable 提供的回调机制,以参数方式传递上下文信息
  3. 交互: 在上下文参数对象中附带了很多存在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体验&#xf…...

线性代数学习-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 的核心好处: 一、一站式环境管理&#xff1a…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; 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日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

剑指offer20_链表中环的入口节点

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

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...