一、组件

请添加图片描述
使用组件中我们可以获得非常多的特性：

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

二、如何支持SFC

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

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

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

三、webpack 打包工具

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

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

比如说vue 需要哪些打包呢？

js 打包：es6转化为es5 ，ts转化为 js
css处理： css模块的加载，处理；less sass 等预处理器的处理
资源文件img,font ：加载
html：打包

package.jsom

随着前端由多页面到单页面，由零散的文件到模块化开发，在每个项目中，都会用到打包工具，比如在使用 webpack，但是他实际上他就是一个包。在开发里，我们肯定不止一个包，包怎么进行管理呢？ package.json 文件其实就是 包管理工具 ，对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

webpack 依赖于node环境，他是js编写的

webpack.config.js

可以在这个文件里配置一些webpack 的相关信息