老Chen先生-CSDN博客

1、安装拓展 Settings Sync在 VSCode 拓展中搜索 Settings Sync 并安装，安装完成后，重启 VSCode2、设置 Github Person Access Token这一步需要你有一个 github 的账号，因为我们需要把配置上传到 github gist 上保存。有了 github 账号后，直接进入这个页面：https://github.com/settings/tokens，点击 generate new token。写入 token 的描述并勾选 gist

2022-01-19 17:21:30 765

原创 Webpack5学习笔记（基础篇九）——缓存

通常，我们使用webpack来打包我们的模块化后的应用程序，webpack 会生成一个可部署的/dist目录，然后把打包后的内容放置在此目录中。只要/dist目录中的内容部署到server上，client (通常是浏览器)就能够访问此server的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于

2022-01-11 15:19:46 1133

原创 Webpack5学习笔记（基础篇八）——代码分离

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。常用的代码分离方法有三种：入口起点：使用 entry 配置手动地分离代码防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk动态导入：通过模块的内联函数调用来分离代码。1、入口起点（entry）

2022-01-10 09:11:21 789 2

原创 JS学习笔记——数据未加载时，内容高度不确定的展开收起按钮显隐问题

今天同事问了我一个问题，有一个“展开—收起”的按钮，如果数据部分高度超过某个临界值，就展示这个按钮；如果数据部分高度没有超过某个临界高度，就不展示。但是最开始页面加载时，数据还没有请求回来，无法得知具体高度。而在日常开发中，我们也经常会遇到有些区块内容可以展开收起的需求，例如以下这两种：固定高度式：对于内容固定，高度固定的情况，很好实现，可以一开始就显示展开/收起按钮，点击切换区块的高度即可。非固定高度式:而对于内容多少不固定，最终高度也不一定的情况，则稍显复杂，难点在于：内容未超出规

2022-01-07 22:16:14 389

原创 Webpack5学习笔记（基础篇七）—— Loader加载器

1、Loader的作用webpack可以自动解析js和json格式的文件，这个是webpack开箱即用的功能，那如果要解析其他类型的文件呢，比如一张图片？前面我们讲过 Asset Module功能可以，而作为最常用的解析工具，loader也可以将这些非js的文件转化为有效的模块。webpack允许我们使用loader来处理文件，loader是一个导出为function的node模块，说白了，loader就是一个函数function。可以将匹配到的文件进行一次转换，同时loader可以链式传递。2、L

2021-12-27 23:06:53 2532 2

原创 Webpack5学习笔记（基础篇六）—— Assets资源模块的加载

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是，除了引入 JavaScript，还可以内置的资源模块 Asset Modules 引入任何其他类型的文件。在webpack4的时候以及之前，我们通常是使用file-loader与url-loader来帮助我们加载其他资源类型。1、Asset Modules Type的四种类型而webpack5可

2021-12-26 20:46:27 3828 1

原创 Webpack5学习笔记（基础篇五）—— mode之Development环境相关参数配置

在Webpack5中，mode（模式）有三种：development（开发环境模式）production（生产环境模式）none或' '（空）在不同模式中，我们可能对于webpack.config.js配置文件进行不同参数的设置比如，在development开发环境中，我们可能使用devTool，devServer等对webpack打包后的代码进行浏览器调试；在production生产环境中，我们可能在optimization配置下面的minimizer中使用CssMinimizerPlugi

2021-12-26 16:45:12 2756 1

原创 Webpack5学习笔记（基础篇四）——Plugins插件

1、Plugins作用Webpack中另一个非常重要的功能是Plugins，我们称之为插件。插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。2、Plugins和Loaders的区别有个题外话，在webpack中还有一个概念，那就是loaders，这两个次经常被用来做对比，我也常常弄混，但是他们是完全两个不同的东西。Loaders（加载器）：是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个Plugins（插件）并不

2021-12-26 15:40:36 1205 1

原创 Webpack5学习笔记（基础篇三）——webpack基础安装与打包

在安装webpack之前，我们要先安装 node，因为webpack是构建在node.js之上。1、安装node.js使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能，或者缺少相关的package。Node下载地址——Node.js官网（mac 可能会下载 .pkg 文件，windows 可能会下载 .exe 或 .msi 文件）下来就是按照操作步骤点击下一步安装就行

2021-12-26 14:32:49 892

原创 Webpack5学习笔记（基础篇二）——module、chunk和 bundle 的关系和区别

在学习webpack相关知识的时候，总是遇到这个名词，module、chunk和bundle，只是大概知道是模块之类的意思，但是不知道具体的关系，所以就想研究一下。首先我们在 src 目录下写我们的业务代码，引入index.js、utils.js、common.js 和 index.css 这 4 个文件，目录结构如下：src/├── index.css├── index.html # 这个是 HTML 模板代码├── index.js├── common.js└── utils.jsin

2021-12-25 20:30:33 779 1

原创 Webpack5学习笔记（基础篇一）—— webpack相关介绍

1、webpack是什么webpack 是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具。WebPack可以看做是模块打包机（bundler），通过分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。2、为什么要使用webpack2.1、js和css依赖问题JavaScript和CSS的依赖问题。开发过程中，JavaScript和CSS的在页面中的顺序问题，经常会造成CS

2021-12-25 18:20:21 821

原创 JS学习笔记——前端的webview是什么东西

1、webview是什么？作用是什么？和浏览器有什么关系？先放一段基本定义：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web page

2021-12-08 22:26:48 5385

原创 JS学习笔记——new Date()日期格式处理

在日常开发过程中，我们常常用到日期或者时间戳，所以我索性就把这个知识点汇总一下，写篇博客记录。1、new Date() 参数格式new Date() 的参数可以为整数，也可以为字符串，但格式必须正确new Date()不传参数时，默认获取的是当前日期new Date()//Mon Dec 06 2021 21:32:28 GMT+0800 (中国标准时间)new Date(1137075575000)//Thu Jan 12 2006 22:19:35 GMT+0800 (中国标准时间)

2021-12-06 21:33:29 21115 1

原创 JS学习笔记——正则表达式面试题（永不停更）

1、匹配用尖括号括起来的以a开头的字符串var str = "this is a <a herf='www.baidu.com'>,not a <img src='xxx'>";var reg = /<a[^>]+>/g;console.log(str.match(reg));//["<a herf='www.baidu.com'>"]2、匹配xxyy模式var reg = /(\w)\1(\w)\2/g;3、- 转驼峰：the-f

2021-11-23 19:07:14 1866

原创 JS学习笔记——从入门到熟练掌握正则表达式（全网最细的讲解含元字符、修饰符、正则方法、特殊用法）

不管是在平时工作学习中，还是面试中，经常会碰到使用正则表达式的场景，平时对这方面没有下功夫，都是用的时候现查先用，过后就忘了，所以想写一篇博客来记录学习一下正则表达式。1、什么是正则正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换2、正则的定义在创建正则表达式的时候有两种方法：2.1、RegExp构造函数var pattern = new R

2021-11-08 22:30:04 414 1

原创 JS学习笔记——事件循环机制Event loop（面试必问）

不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。Event Loop 这个概念相信大家或多或少都了解过，但是有一次被一个小伙伴问到它具体的原理的时候，感觉自己只知道个大概印象，于是计划着写一篇文章，用输出倒逼输入，让自己重新学习这个概念，同时也能帮助更多的人理解它。1、JavaScript单线程先简单介绍几个相关概念：进程： cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）。比如你正在运

2021-10-30 11:58:47 916 1

空空如也

空空如也