w4ngzhen的博客

webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。more直接上总结图。

本文主要讨论基于webpack5+TypeScript的React项目（cra、craco底层本质都是使用webpack，所以同理）在2023年的今天是如何在项目中使用svg资源的。more。

实际上，JSX并不是合法有效的JS代码或HTML代码。目前为止也没有任何一家浏览器的引擎实现了对JSX的读取和解析。此外，JSX本身没有完全统一的规范，除了一些基本的规则以外，各种利用了JSX的JS库可以根据自身需求来设计JSX额外的特性。譬如，React中的元素会有className属性，而SolidJS中的元素会有classList属性。在FaceBook官方博文中也明确提到了：JSX是一种类似XML的语法扩展。它不打算由引擎或浏览器实现。它也不会作为某种提案被合并到ECMAScript规范中。

在介绍如何对JSX代码进行类型检查前，让我们花一点时间认识一下JSX，以及如何对其进行编译。注意：这块内容很多，如果读者已经熟悉这块的内容，可以直接从JSX（TSX）的类型检查开始阅读。实际上，JSX并不是合法有效的JS代码或HTML代码。目前为止也没有任何一家浏览器的引擎实现了对JSX的读取和解析。此外，JSX本身没有完全统一的规范，除了一些基本的规则以外，各种利用了JSX的JS库可以根据自身需求来设计JSX额外的特性。

其实这篇文章并非是全新的文章，早在22年的8月份，我就写了一篇名为《TypeScript与Babel、webpack的关系以及IDE对TS的类型检查》的文章，里面的内容就包含了本文的内容，但迫于当时编写的匆忙，整个文章的结构安排的不好，脉络不清晰，东一块西一块想到哪里写到哪里，同时还想把webpack相关的也介绍了，所以最终内容比较多比较乱。有强迫症的我一直以来对当时的文章都不是很满意。

本文主要介绍了prettier的使用以及在主流IDE中的使用，希望读者阅读本文以后，能够了解prettier与IDE如何进行配合。