前端知识点总结——Webpack的作用和运行原理 / ES6的Map和Set / 设计模式 / meta标签的作用

最新推荐文章于 2024-05-28 16:39:12 发布

西瓜坤坤坤坤

最新推荐文章于 2024-05-28 16:39:12 发布

阅读量223

点赞数

分类专栏：面试文章标签： js javascript

本文链接：https://blog.csdn.net/qq_33290968/article/details/119120023

版权

面试专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Webpack的作用和运行原理

Webpack的作用

打包：
1. 模块打包：一个工程中会分为很多个小的模块，每个小的模块实现一个功能，模块之间相互引用。webpack从入口开始分析每一个包的关系合并成为一个文件。
2. 代码转换：es6转换为es5，less、sass转换为css
3. 构建一个开发时环境，监听本地源代码变化，自动重新构建和浏览器刷新
4. 图片压缩，较小的图片转码为base64

在vue项目中使用webpack：由webpack中的vue-loader将vue编译为js文件 => 由babel将ES6转换为ES5 => webpack打包 => 再由vue将代码抽象为虚拟dom

Vue的虚拟dom是减少页面渲染的次数，Webpack是提供热更新。

Webpack的运行原理

Webpack的核心概念

入口(entry)
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
模式(mode)
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
浏览器兼容性(browser compatibility)
webpack 支持所有符合 ES5 标准的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要提前加载 polyfill。
环境(environment)
webpack 5 运行于 Node.js v10.13.0+ 的版本。

webpack运行原理

读取webpack配置参数：从配置文件（默认为webpack.config.js）和脚本语句中读取与合并参数
开始编译：用上一步得到的参数初始化Compiler对象（负责编译），加载所有配置的插件，执行对象的run方法，开始进行编译
确定入口：根据配置中的entry找出所有的入口文件
编译模块：从入口文件出发，调用所有配置的loader对模块进行翻译，再找出模块的所有依赖，对本步骤进行递归调用，直到所有入口依赖文件转为JavaScript文件
完成编译模块：将解析的文件以entry为单位进行分组，一个entry和其他所有依赖的module分为一个块chunk
输出资源：每个块chunk转换成为一个单独的文件加入输出列表
输出到文件中：在确定好输出内容后，根据配置(webpack.config.js && shell)确定输出的路径和文件名，将文件的内容写入文件系统中(fs)

ES6的Map和Set

Map：保存的是键值对（key-value）

Map与Object的区别：

object的键只能是字符串或symbol，Map的键可以是任意值
Map中的键值是有序的（FIFO），object是无序的
Map可以通过size得知键值对的个数，object只能手动计算

let a = new Map([['str',1],[1,2],[true,3]])
a.set('name',123)
a.set('name','zzk') //相同的key会覆盖前面一个的value
console.log(a.has(1));//true
console.log(a.get(true)); //3
console.log(a); //Map(4) { 'str' => 1, 1 => 2, true => 3, 'name' => 'zzk' }

Map具有的方法

set(key, val): 向Map中添加新元素
get(key): 通过键值查找特定的数值并返回
has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
delete(key): 通过键值从Map中移除对应的数据
clear(): 将这个Map中的所有元素删除

Set：保存的是键（key）

key不能重复，重复的会被自动过滤

let b = new Set([1,2,3,'key',true])
b.add(4)
b.add(3) //重复的不会被添加
console.log(b); //Set(6) { 1, 2, 3, 'key', true, 4 }

Set具有的方法

add(value)：添加某个值，返回 Set 结构本身(可以链式调用)
delete(value)：删除某个值，删除成功返回true，否则返回false
has(value)：返回一个布尔值，表示该值是否为Set的成员
clear()：清除所有成员，没有返回值

设计模式

单例模式：确保只有一个实例，并提供全局访问。

登录弹窗，在任何界面在任何位置点击都是同一个对象创建的弹窗。

工厂模式：不暴露创建对象的具体逻辑，将逻辑封装在一个函数中。

登录跳转：不同权限的用户登陆会跳转到对应的页面中，传入权限传出对应路径。

发布 - 订阅模式：观察者模式，定义了对象间的一种一对多的依赖关系，一个对象状态改变时，所有依赖于它的对象都将得到通知。

js中的点击事件

// 订阅
document.body.addEventListener('click', function() {
    console.log('click1');
}, false);

// 发布
document.body.click();

meta标签的作用

提供关于HTML的元数据，页面不显示但是浏览器可以读取。mate标签服务于浏览器、搜索引擎和网络服务。

1. name属性：供浏览器进行解析，描述网页的关键词。content为对应name填入类型的具体描述。

<meta name='参数' content='具体的描述' />

keywords：告知搜索引擎，网页的关键字

<meta name='keywords' content='前端知识总结' />

description：网站内容描述

<meta name='description' content='Webpack的作用和运行原理 / ES6的Map和Set / 设计模式 / meta标签的作用 的讲解' />

viewprot：移动端窗口
- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0" />