phxxhp

webpack介绍 Webpack是一个模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个，这里讨论的只是最基本的情况）

参考资料 compiler对象官方说明 webpack自定义hook 背景 当我们想要监听webpack打包的过程，并且在webpack的每个生命周期中(hooks)执行一些自己自定义的操作，那么我们

参考资料 玩转 webpack，使你的打包速度提升 90% 背景 当项目使用webpak进行打包后，随着项目的迭代，项目体积会越来越大，打包构建的速度会越来越慢。需要使用一些wepack构建优化的方法

解决的问题 为组件的出现、消失添加过渡的东西效果 工作原理 当 DOM 元素被挂载时，将动效附加到该 DOM 元素上； 当 DOM 元素被卸载时，不要立即卸载 DOM 元素，而是等到附加到该 DOM

要解决的问题 为了让组件能在所有dom元素的最顶层出现，覆盖其他组件。这是常见的业务场景，比如弹窗。 Teleport组件的作用 Vue.js 3 内建了 Teleport 组件。该组件可以将指定内容

作用 动态切换组件，又想保存组件的状态，除了使用v-show，还可以使用keep-alive组件。 KeepAlive 组件可以避免一个组件被频繁地销毁/重建。 原理 KeepAlive 的本质是缓存

参考资料 通用组件设计原则 组件的设计原则 前端组件设计原则 思考总结 1、组件设计的目的 提高业务的开发效率，提高项目的可维护性。 2、组件设计的职能划分 组件可以设计成很多种类型的组件，如容器组件

背景 运营人员通常会在公众号发布一些文章，同样的文章内容也需要发布到app站内，但是如果直接使用微信链接会出现几个问题。 图片链接问题，图片用的是微信的，有可能会把图片给删除。 微信链接会携带微信ap

项目初始化 在根项目创建以下几个文件。 package.json 根目录创建并编辑package.json,内容如下： tsconfig.json 根目录创建并编辑tsconfig.json,内容如下