kevinlaizhiyu

📝**Webpack 插件探秘**：本文深入讲解 Webpack 插件，涵盖构成、Hook 使用、常用对象，助你掌握其精髓，优化项目构建。

Webpack 通过 Tapable 库在编译各阶段暴露 Hook，开发者可监听这些 Hook 注入自定义逻辑。如同给打包流程添加“插件化”的生命周期函数，灵活扩展构建过程。

通过编写简单 Loader，将 CSS 中的 bgcolor 替换为 background-color。展示 Webpack Loader 的基本结构与配置，轻松实现自定义构建逻辑。

Webpack Loader ：魔法棒；Webpack 只认识 JavaScript 文件，但有了 loader，它就能读懂 .ts、.css 等文件了！

Webpack AST 语法分析：代码的精准操控 抽象语法树（AST）帮助我们解析、修改和生成代码。通过 esprima等第三方库，，我们可以精确地操作代码结构，实现语法转换和优化

Webpack 打包文件分析：魔法城堡的秘密 推开 Webpack 的魔法城堡大门，探索模块集合、缓存和加载机制，见证应用逻辑的启动与执行。

聚焦 “webpack 基本使用”，无论你是初涉前端的新手，还是想巩固基础的开发者，这里都有清晰指引。从安装、配置到简单项目应用，一步步带你上手 webpack，开启高效打包代码之旅。

首先，拆分问题： 域名映射。访问域名然后隐射到本地的项目，直接修改host，将域名，隐射到本地的127.0.0.1； 配置端口。 前端项目在vite.config.ts中直接配置80端口，这样就可以使

CSS 基础 1. div 基本概念 每一个元素都是一个矩形，不论是图片，文字，div，span，都是一个矩形， 2. display 展示属性，确定这个元素的显示方式 block 展示为块级元素，特