Webpack的基本概念|青训营

51 阅读3分钟

前端项目,是由这一些文件去构成的。用一个link标签,去声明引入一个正式文件的时候。用image标签去引入一个图片文件,还需要用一个用很多个script标签去引入这些文件。

本质上就是一个前端资源的编译和打包工具。编译是为了应对图片,Max的一些文件,ts文件等等非标准的JS文件,把它编译成一个标准的那个东西,会对这些非真实的文件做一个编译,把它变成一个兼容的内容。然后把编译好的内容再打包成文件。

它本质上就是一个前端资源的编译和打包工具。   开始学习的一个用法。从一个很简单的示例开始。呃,正确率他做的事情很少,首先是第一步就是安装依赖了,第二步就是。水泥的配置文件的配置文件,然后第三步在执行这个MBI空格在一个编译命令。我们就可以把资源编译成右下角的这一张产物

例子对应到前面说的这个产品,我们第一步是需要安装iPad,还有WiFi cli的包,所以需要安装这两个依赖。其次的话是需要写一个WiFi的配置文件,然后需要执行一个MBI。

经过未在打包之后,原始的语句会被会被转换成这个。然后。原本的两个文件就index还有这个把文件会被合并成右边的一个make文件。这就是把多个资源合并成一个资源的过程。

entry是定义我当前这个项目的一个入口。还需要定一个output定义我当前这个项目最终打包完之后放到哪里对。这是一个入口,一个出口。

 

在这个简单的例子里面。三个步骤一个是安装依赖。第二个步骤是写配置文件。第三个步骤是执行一个编译命令,

在未来他工作的过程中。大致上可以分为这四个步骤就是这四个步骤是最最核心的流程。第一个步骤是。入口处理,就是开始去读这个Azure文件,开始启动一个编译的过程。第二个步骤是我从Azure文件里面开始去找到依赖。那在所谓的依赖就是require,还有import。这两个关键字字组成的一个导入导出与语句导入语句。在设定里面的import file,是一个依赖语句需要解析一个语句,找到当前文件对其他文件的依赖,依赖解析,或者叫依赖收集。第三个步骤呢,就是资源处理。我们所有的资源处理就是希望根据model的配置。把一些非的资源转成一个标准的days,

 

第二个步骤还有第三个步骤其实是一个递归处理的过程。

在第二个步骤所找到的新的资源里面会有index所依赖的这个大文件用定义了其他新的依赖,针对这个发大文件去找这个文件的依赖,这个过程就是一个递归处理的过程。第二步骤第三步骤一直在循环的递归的处理。一直到所有整个项目里面的所有资源都被解析到了,就结束了,之后进入第四个阶段。

 

第四个阶段是资源合并打包。包括插入一些运行时代码,优化代码、代码混淆、代码压缩。