你好，今天过的怎么样呀，嘿嘿，加油夏 💕

---

一、组件

使用组件中我们可以获得非常多的特性：

1. 代码的高亮；
2. ES6、CommonJS的模块化能力；
3. 组件作用域的CSS；
4. 可以使用预处理器来构建更加丰富的组件，比如TypeScript、Babel、Less、Sass等

二、如何支持SFC

事实上随着前端的饿快速发展，目前前端的开发越来越复杂了，比如我们需要通过 模块化开发 ，比如使用 高级的特性 来加快我么开发效率或者安全性，比如通过 es6 、ts 开发脚本逻辑，通过 cass、less 登方式来编写css样式；比如开发过程中，我们还希望 实时的监听文件的变化并反映到浏览器上 ，提升开发效率 ； 比如开发完成吼 需要将代码压缩、合并登其他优化 。 浏览器只能识别js 代码，但是不能解析这个模板，如果我们想要使用这一的SFC的.vue文件，比较常见的是两种方式：

1. 使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件；
2. 自己使用webpack或rollup或vite这类打包工具，对其进行打包处理；

很多开发者来说，并不需要思考这种问题，因为不管是vue react angular 都是借助脚手架cli帮我们打包的，事实上cli实际上是基于webpack 搭建的

三、webpack 打包工具

webpack 是一个静态的 模块化 打包 工具，为现代的 javaScript 应用程序

1. 打包bundler : webpack可以将帮助我们进行打包，所以它是一个打包工具
2. 静态的static : 这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器)
3. 模块化module : webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
4. 现代的modern : 我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发