webpack的一些知识

核心

  • webpack 是用来搭建前端工程的
  • 它运行在node环境中,它所做的事情,简单来说,就是打包
  • 具体来说,就是以某个模块作为入口,根据入口分析出所有模块的依赖关系,然后对各种模块进行合并、压缩,形成最终的打包结果
  • 在webpack的世界中,一切都是模块

体验

按照习惯,所有的模块均放置在 src 目录中

  1. 安装依赖
  2. 编写多个模块 随意模块,可以是js、图片、音视频,以入口模块为起点,形成依赖关系
  3. 运行npm run build命令,进行打包
  4. 查看打包结果 ,打包结果放置在dist目录中

不难发现,webpack给我们带来了以下好处:

  1. 可以大胆的使用任意模块化标准,无须担心兼容性问题,因为webpack完成打包后,已经没有了任何模块化语句
  2. 可以将一些非 js 代码也视为模块,这样可以对 css 、图片等资源进行更加细粒度的划分
  3. 在前端开发中,也可以使用npm。webpack不会运行源代码,无论是自己写的模块还是通过npm安装的模块,webpack 一律认为是依赖,最终合并到打包结果中
  4. 非常适合开发单页应用,单页应用是前端用户体验最好的web应用,所谓单页应用,是指只有一个html页面,页面中没有任何内容,所有的内容均靠js生成,要优雅的实现单页应用,最好依托于前端框架,比如vue、react
  • webpack 给我们开发带来的变化远不止于此

页面模版

  • 对于单页应用而言,只有一个空白的页面,所有内容都靠 js 代码创建
  • webpack 会自动生成一个页面,并且在页面中会自动加入对 js 和 css 的引用
  • 它生成页面时,参考的是 public/index.html,其称之为页面模版

public目录

  • webpack 会非常暴力的将 public 目录中的所有文件(除页面模板外),复制到打包结果中

开发服务器

  • 如果每次修改完代码,都要经过 打包-> 运行,太过麻烦了
  • 在开发阶段,我们可以运行 npm run serve 命令获得更好的打包体验
  • 该命令会让 webpack 启动一个开发服务器
  • 在这个阶段,webpack并不会形成打包结果文件,而是把打包的内容放到内存中,当我们请求服务器时,服务器从内存中给予我们打包结果
  • 与此同时,当源码发生变动时,webpack会自动重新打包,同时刷新页面以访问到最新的打包结果

文件缓存

  • 除了页面外,其他的资源在打包完成后,文件名多了一些奇奇怪怪的字符
  • 例如:js/app-22324a23.js
  • 其中,22324a23 这样的字符称之为hash,它会随着模块内容的变化而变化
  • 源码内容不变,hash不变;源码内容变化,hash变化
  • 之所以这样做,是因为生产环境中,浏览器会对除页面外的静态资源进行缓存
  • 如果不设置hash值,一旦代码更新,浏览器还会使用之前缓存的结果,无法使用最新的代码
  • **webpack会在打包时自动处理 hash 值,并不会对我们写代码造成任何影响,但作为一个前端开发者,有必要了解一下

资源路径

  • 除代码和样式模块外,其他模块被视为资源模块

  • 值得注意的是,资源模块在源代码中的路径和打包后的路径是不一样的,这就导致了我们在编写代码的时候,根本无法知晓资源最终的路径

  • 最常见的例子就是在css中使用背景图片

  • .container {/* 背景图使用了源码中的路径 */background: url('../assets/1.jpg');
    }
    
  • 这里可以正常工作,因为webpack 可以非常智能的发现这一点,对于css中的路径,webpack在打包时,会将其自动转为打包结果的路径

  • 上面的例子可能被转换为下面的代码:

  • .container {background: url(/img/1234aa.jpg);
    }
    
  • 但是我们要通过 js 动态的使用路径,webpack 是无法识别的

// 打包前
const url = './assets/1.png'; // 路径无法被转换
img.src = url;// 打包后
const url = './assets/1.png'; // 错误
img.src = url;
  • 正确的做法是,通过模块化的方式导入资源,并获取资源路径
// 打包前
import url from './assets/1.png'; // 打包后,url得到的是打包后的路径
img.src = url;// 打包后
const url = '/img/1234aa.png'; // 正确
img.src = url;

缺省的文件和后缀名

  • 导入模块时,所有 js 模块均可省略 .js ,若导入的模块文件名为 index.js ,可省略文件名
import './home'; // home.js
import './movie'; // 若movie是一个目录,则导入的是./movie/index.js

路径别名

  • 随着代码量的增加,不可避免的是形成层级深的目录
  • webpack 提供了别名供我们快速定位到 ./src 目录,通常,该别名为@

js 兼容性

  • 当webpack 读取到 js 代码时,会自动对其进行兼容性处理
  • 具体的处理方案涉及两个配置文件
    1. babel.config.js: 配置该文件,可以设置对哪些 js 代码进行降级处理
    2. .browserslistrc: 配置该文件,可以设置在降级时,要兼容哪些浏览器,兼容的范围越广,降级产生的代码就越多,自然打包后的体积就越大

打包压缩

  • webpack 在打包时,会对所有的 js 和 css 代码进行压缩
  • 对于 js ,除了压缩外,还会对其中的各种名称进行混淆
  • 混淆的作用一是为了进一步压缩包体积,二是为了我们的代码更难被其他人理解利用

源码地图

  • source map
  • 打包后的结果是很难阅读的
  • 如果代码报错,我们将难以得知出错的代码行
  • 可以发现,打包后都会跟上一个同名的、后缀为 .map 的文件,该文件就保存了原始代码的内容
  • 这个内容人类是看不懂的,但是浏览器可以看懂
  • 代码报错时,浏览器定位到源码地图中的对应代码,而不是把真实报错的代码展示给我们

css工程化

  • webpack 能够识别所有的样式代码,包括 css、 less、sass、stylus
  • 打包时,便会将它们转换为纯正的 css
自动厂商前缀
  • css有很多兼容性问题,解决这些问题最常见的办法就是加上厂商前缀
  • webpack 会根据 .browserlistrc 中指定的浏览器范围,按需自动加上厂商前缀
css module
  • css 文件多了后,为了保证它们之间没有冲突的类样式
  • 靠的是 css module
  • 当样式文件以 xxx.module.xxx 的方式命名时,webpack 会将该文件当成一个开启了 css module 的文件
  • 然后文件中的所有类名都将被 hash 化
  • 我们在使用类名时,通过下面的方式得知打包后的类名
import './index.module.less';
dom.classList.add('container'); // ❌ 最终的类名可不是这个// styles 是一个对象,里面映射了源码类名和打包类名的关系
import styles from './index.module.less';
dom.classList.add(styles.container); // ✅ 属性container中记录的就是container转换后的类名

其实webpack 并没有这么强大

  • 实际上,它就是通过插件(plugin) 和加载器(loader)将这些技术整合在一起
  • .browserslistrc :表达适配的浏览器范围,会被工程化中的其他技术所使用
  • babel.config.js :babel的配置文件,做 js 降级处理
  • postcss.config.js :postcss 的配置文件,做css代码转换
  • webpack.config.js :webpack 的配置文件,整合其他工程化技术,以及配置打包细节、开发服务器、路径别名等

对我们的影响(important)

  1. 学会访问开发服务器查看效果
  2. 学会动态获取资源文件路径(import url from ‘./assets/1.jpg’)
  3. 学会省略文件和后缀名(js文件和index.js文件)
  4. 学会使用别名简化导入代码(import ‘@/a/a1’)
  5. 学会使用 css module(index.module.less)

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

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

相关文章

洛谷P1157 组合的输出

深搜板子加一点点修改&#xff0c;适合初学者体会深搜&#xff0c;具体看代码 题目链接 ACcode #include<bits/stdc.h>using namespace std;int a, b;bitset<50>vis;//剪枝 int d[50];void dfs(int x) {if (x b 1) {for (int i 1;i < b;i)cout << se…

HBM(High Bandwidth Memory)

选择正确的高带宽内存 构建高性能芯片的选择越来越多&#xff0c;但附加内存的选择却几乎没有变化。为了在汽车、消费和超大规模计算中实现最大性能&#xff0c;选择取决于一种或多种 DRAM&#xff0c;而最大的权衡是成本与速度。 尽管多年来人们一直在努力用更快、更便宜或更…

Linux:kubernetes(k8s)搭建mater节点(kubeadm,kubectl,kubelet)(2)

安装k8有多种方式如&#xff1a; minikube kubeadm 二进制安装 命令行工具 我这里就使用kubeadm进行安装 环境 3台centos7 master ip &#xff1a;192.168.113.120 2G运存 2内核 node1 ip &#xff1a;192.168.113.121 2G运存 2内核 node2 ip &#xff1a;192.168.1…

重构与设计模型的完美融合:构建稳定可扩展系统的关键步骤

在软件开发的漫长旅程中&#xff0c;系统的稳定性和可扩展性一直是开发者们追求的目标。为了实现这一目标&#xff0c;重构和设计模型成为了不可或缺的两个关键元素。本文将探讨如何通过重构&#xff0c;使系统更稳定、更具可扩展性&#xff0c;并深入研究如何将重构与设计模型…

JavaEE:多线程(3):案例代码

目录 案例一&#xff1a;单例模式 饿汉模式 懒汉模式 思考&#xff1a;懒汉模式是否线程安全&#xff1f; 案例二&#xff1a;阻塞队列 可以实现生产者消费者模型 削峰填谷 接下来我们自己实现一个阻塞队列 1.先实现一个循环队列 2. 引入锁&#xff0c;实现线程安全 …

运用qsort函数进行快排并使用C语言模拟qsort

qsort 函数的使用 首先qsort函数是使用快速排序算法来进行排序的&#xff0c;下面我们打开官网来查看qsort是如何使用的。 这里有四个参数&#xff0c;首先base 是至待排序的数组的首元素的地址&#xff0c;num 是值这个数组的元素个数&#xff0c;size 是指每个元素的大小&am…

Python猜数字小游戏

下面这段代码是一个简单的数字猜测游戏&#xff0c;其中计算机已经提前计算出了414 // 23的结果并存储在变量num中。然后&#xff0c;程序会提示用户来猜测这个结果。 以下是代码的主要步骤和功能&#xff1a; 初始化&#xff1a; num 414 // 23&#xff1a;计算414除以23的整…

Linux:各目录含义

简介 学习Linux各目录含义之前&#xff0c;我们首先要了解一下Filesystem Hierarchy Standard&#xff08;文件系统层次结构标准&#xff09;。 FHS FHS&#xff0c;即文件系统层次结构标准&#xff08;Filesystem Hierarchy Standard&#xff09;&#xff0c;是Linux和类Un…

深入了解Redis:配置文件、动态修改和安全设置

Redis 是一个开源的内存中数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。在使用 Redis 时&#xff0c;了解其配置选项是至关重要的。本文将详细介绍 Redis 的配置文件和常用配置项&#xff0c;并提供一些示例来说明如何设置和修改这些配置。 Redis 配置文…

基于stm32F103的座面声控台灯

1.基本内容&#xff1a; 设计一个放置在桌面使用的台灯&#xff0c;使用220v交流电供电。具备显示屏能够实时显示日期&#xff08;年、月、日和星期&#xff09;&#xff0c;时间&#xff08;小时、分钟、秒&#xff09;和温度&#xff08;摄氏度&#xff09;&#xff1b;能够通…

Python爬取天气数据及可视化分析!(含源码)

天气预报我们每天都会关注&#xff0c;我们可以根据未来的天气增减衣物、安排出行&#xff0c;每天的气温、风速风向、相对湿度、空气质量等成为关注的焦点。本次使用python中requests和BeautifulSoup库对中国天气网当天和未来14天的数据进行爬取&#xff0c;保存为csv文件&…

帆软下载PDF报错java.lang.OutOfMemoryError: Java heap space

需求:前端选择多条数据&#xff0c;点击下载按钮&#xff0c;下载帆软报表的pdf格式。 &#xff08;目前用的是帆软PDF下载接口&#xff0c;然后java转成文件流&#xff0c;前端接到后端接口的文件流&#xff0c;使用axios下载blob,再创建下载链接&#xff0c;通过link标签实现…

ArduinoTFTLCD应用

ArduinoTFTLCD应用 ArduinoTFTLCD应用硬件连接软件导入库显示数字、字符显示汉字方案1方案2 显示图片 总结 ArduinoTFTLCD应用 对于手工喜欢DIY的人来说&#xff0c;Arduino驱动的TFTLCD被很多人使用&#xff0c;此处就总结一下&#xff0c;使用的是VScode的PlatformIO插件驱动…

C# API异步方法和返回类型:提升应用程序性能和灵活性

摘要&#xff1a; 异步编程是现代应用程序开发中不可或缺的一部分。在C#中&#xff0c;异步方法允许我们在等待操作完成时继续执行其他任务&#xff0c;从而提高应用程序的性能和响应性。本文将介绍C# API异步方法的基本概念、原理和实际应用&#xff0c;并详细讨论异步方法的返…

【机器学习】实验5,AAAI 会议论文聚类分析

本次实验以AAAI 2014会议论文数据为基础&#xff0c;要求实现或调用无监督聚类算法&#xff0c;了解聚类方法。 任务介绍 每年国际上召开的大大小小学术会议不计其数&#xff0c;发表了非常多的论文。在计算机领域的一些大型学术会议上&#xff0c;一次就可以发表涉及各个方向…

RNA-Seq 笔记 [4]

***********************该笔记为初学者笔记&#xff0c;仅供个人参考谨慎搬运代码****************************** samtools 排序压缩和 featureCounts 生成基因计数表 SAM文件和BAM文件 1.SAM格式&#xff1a;是一种通用的比对格式&#xff0c;用来存储reads到参考序列的比…

2024最新算法:鳑鲏鱼优化算法(Bitterling Fish Optimization,BFO)求解23个基准函数(提供MATLAB代码)

一、鳑鲏鱼优化算法 鳑鲏鱼优化算法&#xff08;Bitterling Fish Optimization&#xff0c;BFO&#xff09;由Lida Zareian 等人于2024年提出。鳑鲏鱼在交配中&#xff0c;雄性和雌性物种相互接近&#xff0c;然后将精子和卵子释放到水中&#xff0c;但这种方法有一个很大的缺…

BUUCTF---[极客大挑战 2019]Upload1

1.题目描述 2.点开链接&#xff0c;需要上传文件&#xff0c;要求是image&#xff0c;上传文件后缀为jpg的一句话木马&#xff0c;发现被检测到了 3.换另一个木马试试 GIF89a? <script language"php">eval($_REQUEST[1])</script> 发现可以上传成功 4…

ctf_show笔记篇(web入门---文件包含)

目录 文件包含 78-79&#xff1a;最基础的文件包含&#xff0c;使用伪协议&#xff0c;大小写绕过或者通配符绕过&#xff0c;再或者使用其他方法 ​编辑80-81&#xff1a;可采用日志文件绕过或者大小写绕过&#xff08;81只能日志文件绕过&#xff09; ####80-86&#xff1…

『周年纪念』- 降生CSDN三周年的碎碎念

『周年纪念』- 降生CSDN三周年的碎碎念 缘起机缘迷茫厚积薄发 一转眼又过来一年&#xff0c;自己也已经 大四即将毕业。 感觉这一年像是开了加速键&#xff0c;仿佛一瞬就又过去了。统计了一下发现自己在过去的这一年就发布了 2篇文章&#xff0c;2022年发布了 117篇&#x…