两周前（202.02.17），vite2.0 发布了，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。
如何实现可复用的控制台“艺术字”打印
之前在使用一些开源项目时，经常会看到在控制台输出项目大大的 LOGO。例如：
- hexo minos 主题启动时在控制台里会显示「MINOS」文案
- fis3 启动时也会有显示「FIS」
添加这种大号「艺术字」可以达到「品牌露出」的效果，当然，也是程序员特有「情趣」的体现。 😄
但它们的实现方式无外乎把编排好的 Logo 通过 console.log 输出。这种方式问题在于它几乎没有任何复用能力，而且一些需要转义的情况还会导致字符串的可维护性极差。因此，我花了一个周末的时候，实现了一个易用的、可复用的控制台「艺术字」lib。这样，下次有新的需求，只需要把正常的文本传给它，它就可以帮你自动编排与打印。
替代 webpack？带你了解 snowpack 原理
聊一聊 webpack 的打包优化实践
去年接触了公司内一个开发运行了两年多的项目，整体应用是基于 React 技术栈的，多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转，而子业务内部则是 SPA 形式。
项目的构建使用了 webpack，发现存在较大问题：
- 在生产环境上线编译大致需要 13 min+；
- 本地开发环境下，代码改动后的热更新（增量编译）需要大概 10～20s 的时间，使得开发体验很差。
相信这些问题在很多上线迭代了很长时间的、使用了 webpack 的团队中都会遇到，所以把自己的优化实践经历写出来，和大家交流下。我在优化的时候也参考了许多网络上介绍的优化手段，当然，有些具有不错效果，有些可能对我们来说不适用。这并不是一篇罗列各种 webpack 优化技巧的文章，除了优化实践，还会有一些期间的反思。
🛠如何快速开发一个自己的项目脚手架？
你真的掌握了 webpack 么？- loader 十问
「 你能回答这十问么？」
- webpack默认配置是在哪处理的，loader有什么默认配置么？
- webpack中有一个resolver的概念，用于解析模块文件的真实绝对路径，那么loader和普通模块的resolver使用的是同一个么？
- 我们知道，除了config中的loader，还可以写inline的loader，那么inline loader和normal config loader执行的先后顺序是什么？
- 配置中的
module.rules在webpack中是如何生效与实现的？ - webpack编译流程中loader是如何以及在何时发挥作用的？
- loader为什么是自右向左执行的？
- 如果在某个pitch中返回值，具体会发生什么？
- 如果你写过loader，那么可能在loader function中用到了
this，这里的this究竟是什么，是webpack实例么？ - loader function中的
this.data是如何实现的？ - 如何写一个异步loader，webpack又是如何实现loader的异步化的？
可视化 webpack 内部插件与钩子关系📈
webpack 的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。
本文的第一部分会先介绍钩子（hook）这个重要的概念与 webpack 插件的工作方式。然而，熟悉的朋友会发现，这种灵活的机制使得 webpack 模块之间的联系更加松散与非耦合的同时，让想要理清 webpack 内部源码结构与联系变得更困难。第二部分将会介绍 webpack 内部插件与钩子关系的可视化展示工具📈，用一张图理清 webpack 内部这种错综复杂的关系。
