1. 为什么需要集成其他工具？在现代前端开发中，Webpack 通常需要与其他工具结合使用，以提升开发效率和代码质量。常见的集成场景包括：
代码检查：使用 ESLint 检查代码规范。
类型检查：使用 TypeScript 增强代码的可靠性。
样式处理：使用 PostCSS 或 Sass 增强 CSS 功能。
测试工具：使用 Jest 或 Mocha 进行单元测试。
本文将介绍如何将 Webpack 与这些工具集成。
2. 集成 ESLintESLint 是一个用于检查 JavaScript 代码规范的工具。
2.1 安装 ESLint*1npm install eslint eslint-webpack-plugin --save-dev
2.2 配置 ESLint在项目根目录下创建 .eslintrc.js 文件：
1234567891011121314module.exports = { env: { browser: true, es2021: true }, extends: ['eslint:recommen ...
1. 为什么选择 React/Vue来实践 ？React 和 Vue 是现代前端开发中最流行的框架之一，但它们本身并不提供构建工具。Webpack 可以帮助我们：
打包项目资源：将 JavaScript、CSS、图片等资源打包成静态文件。
支持模块化开发：使用 ES Module 或 CommonJS 组织代码。
优化项目性能：通过代码分割、懒加载等手段提升页面加载速度。
集成开发工具：支持热更新、Source Map 等功能，提升开发体验。
本文将介绍如何使用 Webpack 构建 React 和 Vue 项目。
2. 构建 React 项目2.1 初始化项目创建一个新的项目目录，并初始化 package.json：
123mkdir react-webpack-democd react-webpack-demonpm init -y
2.2 安装依赖安装 React 和 Webpack 相关依赖：
1234npm install react react-domnpm install webpack webpack-cli webpack-dev-server - ...
1. 为什么选择构建多页面应用与 Library？在实际开发中，我们可能会遇到以下需求：
多页面应用（MPA）：一个项目包含多个独立的页面，每个页面有自己的入口和模板。
Library：开发一个可复用的库，供其他项目使用。
Webpack 可以帮助我们高效地完成这些任务。本文将介绍如何使用 Webpack 构建多页面应用和 Library。
2. 构建多页面应用2.1 项目结构一个典型的多页面应用结构如下：
12345678910111213multi-page-app/├── src/│ ├── index/│ │ ├── index.js│ │ └── index.html│ ├── about/│ │ ├── about.js│ │ └── about.html│ └── shared/│ └── utils.js├── dist/├── webpack.config.js└── package.json
2.2 配置多入口在 webpack.config.js 中配置多入口：
1234567891011121314 ...
1. 为什么需要自定义插件？Webpack 插件是扩展 Webpack 功能的核心机制。通过自定义插件，我们可以：
干预打包过程：在打包的任意阶段执行自定义逻辑。
优化构建结果：例如压缩代码、生成资源清单等。
集成外部工具：例如自动上传文件到 CDN、生成 HTML 报告等。
本文将详细介绍如何开发一个 Webpack 插件。
2. 插件的基本结构一个 Webpack 插件是一个 JavaScript 类，需要实现 apply 方法。apply 方法接收一个 compiler 对象，用于访问 Webpack 的内部钩子。
2.1 插件示例以下是一个简单的插件示例：
123456789class MyPlugin { apply(compiler) { compiler.hooks.done.tap('MyPlugin', stats => { console.log('打包完成！'); }); }}module.exports = MyPlugin; ...
1. 为什么需要自定义 Loader？Loader 是 Webpack 的核心功能之一，用于对模块的源代码进行转换。通过自定义 Loader，我们可以：
处理特殊文件类型：例如将 Markdown 文件转换为 HTML。
优化代码：例如压缩图片、转换 CSS 预处理器。
集成外部工具：例如将 TypeScript 转换为 JavaScript。
本文将详细介绍如何开发一个 Webpack Loader。
2. Loader 的基本结构一个 Loader 是一个 JavaScript 函数，接收源代码作为输入，返回转换后的代码。Loader 还可以通过 this 访问 Webpack 的 API。
2.1 Loader 示例以下是一个简单的 Loader 示例，用于将文本转换为大写：
123module.exports = function(source) { return source.toUpperCase(); // 将文本转换为大写};
2.2 使用 Loader在 webpack.config.js 中使用 Loader：
123456789101 ...
1. 系列回顾在本系列教程中，我们从基础到进阶，详细探讨了 Webpack 的各个方面。以下是每篇文章的核心内容回顾：
Webpack 简介：介绍了 Webpack 的核心概念和基本用法。
Webpack 环境搭建：手把手教你搭建 Webpack 开发环境。
Webpack 入口与出口配置：深入讲解了多入口、多出口的配置方法。
Webpack Loader 详解：学习了如何处理 CSS、图片等资源。
Webpack Plugin 详解：掌握了如何使用插件扩展 Webpack 的功能。
Webpack 开发环境配置：配置了开发服务器、热更新和 Source Map。
Webpack 生产环境配置：优化了代码压缩、文件指纹和 Tree Shaking。
Webpack 性能优化：提升了构建速度和打包效率。
Webpack 配置拆分与合并：学会了管理复杂的 Webpack 配置。
Webpack 与其他工具的集成：集成了 ESLint、TypeScript 等工具。
Webpack 实战应用：构建 React/Vue 项目：使用 Webpack 构建了 React 和 Vue 项 ...
引言ref 和 reactive 可以称做是 Vue 响应式 API 中的周瑜和诸葛亮。那么问题来了，你会怎么选？本来将讨论 ref 和 reactive 的区别，并说一下我个人对于这件事的看法。
一、ref 和 reactive 的基础概念1. ref 是什么？ref 是将基本类型数据（如字符串、数字、布尔值等）转换为响应式对象。
ref 主要用于创建单一的值，或者是一个不可变的引用。
它返回的是一个包含 value 属性的对象，value 里存放着你传给 ref 的值。
123456789import { ref } from "vue";const count = ref(0);console.log(count.value); // 0// 修改值时直接操作 .valuecount.value = 5;console.log(count.value); // 5
2. reactive 是什么？reactive 是将对象和数组转为响应式数据。可以直接操作对象或数组，而不需要使用 value，而且会自动追踪这些对象内部的变化。
r ...
1.题目1234567891011121314151617181920212223242526Promise.resolve().then(() => { console.log(0); return Promise.resolve(4);}).then((res) => { console.log(res)})Promise.resolve().then(() => { console.log(1);}).then(() => { console.log(2);}).then(() => { console.log(3);}).then(() => { console.log(5);}).then(() =>{ console.log(6);})//0//1//2//3//4//5//6
2.考察点2.1 Promise 的微任务队列
Promise 的回 ...
1. 邮箱验证1/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
2. 手机号验证（中国大陆）1/^1[3-9]\d{9}$/
3. 身份证号验证（中国大陆）1/^\d{17}[\dXx]$/
4. URL 验证1/^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/
5. IP 地址验证1/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
6. 日期格式验证（YYYY-MM-DD）1/^\d{4}-\d{2}-\d{2}$/
7. 时间格式验证（HH:MM:SS）1/^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/
8. 用户名验证（字母、数字、下划 ...
指令-查看状态信息
指令
描述
git –version
查看git版本
git status
查看本地仓库状态，比较常用的指令，加参数-s简洁模式
git [指令] -h
查看指令帮助信息
git [指令] –help
打开指令详细帮助页面
git remote -v
查看所有远程仓库，不带参数-v只显示名称
git branch
查看分支列表，以及当前分支
git tag
查看标签列表
git log -n20
查看日志(最近20条)，可省略n为-20；参数--graph可视化显示分支关系
git log –follow [file]
显示某个文件的版本历史，包括文件改名
git reflog
查看所有可用的历史版本记录（实际是HEAD变更记录），包含被回退的记录，常用来撤销回退
git blame [file]
以列表形式查看指定文件的历史修改记录
git config –list
查看配置信息，包括系统（–system）+全局（–global）+项目（–local）配置
git config –list –system
...
