
webpack 的成功之处,不仅在于强大的打包构建能力,也在于它灵活的插件机制。
本文的第一部分会先介绍钩子(hook)这个重要的概念与 webpack 插件的工作方式。然而,熟悉的朋友会发现,这种灵活的机制使得 webpack 模块之间的联系更加松散与非耦合的同时,让想要理清 webpack 内部源码结构与联系变得更困难。第二部分将会介绍 webpack 内部插件与钩子关系的可视化展示工具📈,用一张图理清 webpack 内部这种错综复杂的关系。

webpack 的成功之处,不仅在于强大的打包构建能力,也在于它灵活的插件机制。
本文的第一部分会先介绍钩子(hook)这个重要的概念与 webpack 插件的工作方式。然而,熟悉的朋友会发现,这种灵活的机制使得 webpack 模块之间的联系更加松散与非耦合的同时,让想要理清 webpack 内部源码结构与联系变得更困难。第二部分将会介绍 webpack 内部插件与钩子关系的可视化展示工具📈,用一张图理清 webpack 内部这种错综复杂的关系。

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint,但是通过本文,你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。

本文为翻译文章,原文链接见文末
无论你是一个想要学习CSS布局的新手,还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者,这篇指南都能帮你全面了解如今CSS布局发展的现状。

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。💅styled-components 就是一种实现 CSS 模块化的 CSS in JS 方案。

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。
这一篇文章主要介绍了,如何在webpack中使用一种类似“CSS模块化”的解决方案———Local Scope,来规避一些开发中的问题。

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。
本篇会讲解BEM方法论,并将其与CSS命名空间结合。

在前八篇文章中,我已经介绍了一些 PWA 中的常见技术与使用方式。虽然我们已经学习了很多相关知识,但是,还是有很多问题在实践时才会暴露出来。这篇文章是一篇 TroubleShooting,总结了我近期在PWA实践过程中遇到了一些问题,以及这些问题的解决方案。希望能帮助一些遇到类似问题的朋友。
Update your browser to view this website correctly. Update my browser now