vue3 基础知识 （ webpack 基础知识）05

你好

文章目录

• 一、组件
• 二、如何支持SFC
• [三、webpack 打包工具](#三、webpack 打包工具)
• [四、webpack 依赖图](#四、webpack 依赖图)
• [五、webpack 代码分包](#五、webpack 代码分包)

---

一、组件

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

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的出现和发展

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

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

package.jsom

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

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

webpack.config.js

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

四、webpack 依赖图

1. 事实上webpack 在处理应用程序时，会根据命令或者配置文件找到入口文件
2. 从入口开始，会生成一个 依赖关系图 ， 这个依赖图包括应用程序中所需的所有模块（js,css，img,font...）
3. 然后遍历图结构，打包一个个模块（根据文件的不同，使用不同的loader来解析）
4. 不会产生依赖冲突，如果已经加载过的会有个标记不会再次加载
   

五、webpack 代码分包