02-尚硅谷-webpack从入门到精通-webpack简介

大家好啊，接下来呢，我们带来的是第一张派的简介。我们打开课件。这里呢，对派有个介绍派，它是一个前端的资源构建工具啊。它也是一个呢，静态模块打包器这样的东西。好，那么有同学可能会问，这前端资源构建工具是什么意思呢？诶，还有这个资静态模块打包器，它又代表什么。好，那接下来呢，我们通过一段代码来大家认识一下这两个概念。我们先来看第一个啊，我们打开编辑工具Vs code啊。好，在这儿呢，我新建一个文件夹，叫第1PE。简介。好，接下来呢，这些代码呢，都会发给大家啊，所以呢，大家可以根据这个目录来知道我们写代码在哪块。好，这个简介里面呢，我们打算啊，像我们往常一样写HLCSS和JS代码。

我呢，新建一个文件叫做index HL来写HL代码。好，我们的基本写的内容啊，基本写的内容。派简介。OK，好，这儿呢，我呢写一个标题啊，定一个ID为title，内容呢，我就简单写一点啊，Hello。好了，那么这儿呢，我就写好了，我们H。那么好，哎，接下来呢，我们就得写样式。这样式啊，我们想我们样式呢，通常来讲，在开发中啊，我们都会使用CS预处理器这种技术。那么预处理器呢？有less，有萨，有status等等一项内容。那么这呢？我们以less为例来去写的内容。好，我在这呢，再去新建一个东西啊好，诶这个目录呢，应该移进去啊，我们移进去好，在这儿呢，再新建一个文件叫less。好，Let文件啊，在这呢，我们写一点点样式。我们呢，给玻和HL啊，写些非常基本的内容啊，马零零，然后呢，给他一个高百分百。

对吧，高百分百啊，然后呢，我们将它调一个背景色，不要光看了，诶诶一个比较骚气的颜色啊。好了，那么我们在呢，咱们的样这些LA子啊，这预处理器的好处呢，就在于这些样式呢，可以啊，层层叠叠去使用，就是可以包裹着使用，所以我们在这里再去定义一个title啊。我们呢，给它改个color啊，将字体颜色呢改成一个白色吧，啊，我们就随便写点内容了啊。好，那么好样式写好了啊，接下来呢，我们得在我们的HL中将它引入。好，这里呢，诶大家通知到啊，通过link标签将这个样式呢引进来。好，那么这就有问题了，那请问一下啊，就是这个样式呢，待会会不会生效。好，哎，我们来看一下啊。诶，我们会发现呢，它并没有生效啊，并没有生效，哎，这是为什么呢？哎，大家可能有同学已经知道了啊，就是这个less呢，它呢对于浏览器来讲是并不能识别的。

我们需要借助工具将less编译成CS，诶，编译成CS这个代码呢，浏览器才能识别对吧？所以呢啊，当我们使用这种CS预期处理器技术去开发样式的时候呢，我们就需要一个工具啊，当我们将less啊编译成CS，这时候才能运行。那么我们记住啊，这需要一个工具。好，接下来呢，我们可能还要开发JS代码，诶，我们来写JS代码。The。然JS代码呢，可能啊，要使用J去操动，所以我们还得下载一下JRY好，那我们呢，打开控制台啊。打开到这中，在终端中打开这个文件夹，那我们去下一东西好，首先呢，初始化一个包米标书文件啊，NPNP。而这派的名字呢，我们叫派test啊。

小写。OK，然后其他的都使用默认值就OK。这时候呢，我们通过指令NPM啊好这呢就大家需要一些基本的一些note常识啊，NPM呢是我们啊一个按当你安装好not的时候，就会多一个指定叫NPMNPM呢能够把我们前端的去下载一些包啊，我们这儿呢，将我们要用的这会给下下来。诶，下下来呢，我们就可以使用它了，好OK啊，现在下好了版本是3.4OK，那么我们要引入的话呢，诶这里我们使用modu将这个JA呢引进来。通过import语法啊，将这个整合呢引进来。OK，引进来对它进行一些基本操作啊，我们找到title啊，找到ID。开头，然后呢，给他绑定一个事件叫click啊，在里面呢，我们去改变这个全局的一个背景色。好，比如玻璃啊。将它的。使用CS这个方法啊，去改变它的background color。

对吧，比如调成A一个更骚气的颜色啊，Pink。是吧？好，这时候啊，代码写好了，那么文件要想生效，同样的我们也得引入啊，同样的也得引入。通过思路标签啊，通过思路标签引入。好，这时候我们来看啊，这时候我们的代码写好了，那么我们的程序能生效吗？我们来看一下啊。刷新诶，我点是没有效果的啊，我们通过F12调试查看呢，你会发现他报了个错误啊，报了个错，报了个语法错误。这个语法错误啊，指的是呢，就是我们啊这个JS里面的这个E6的module语法啊，E6的模块化语法，那么浏览器呢，是并不能识别的啊，所以呢，他就报了个语法错误。好，那么这里回到我们的HL页面上来啊，回到这来，这时候我们会发现呢，当我们使用S这种预处理记技术去开发样式，你会发现浏览器并不能识别，并不会解析啊，所以呢，诶，这时候我们需要借助一个工具啊，将这个let编译成CS。

对吧，诶，那我们去开发GS代码的时候啊，我们要用一些的一些或者E7更高的一些语法啊，比如说6MODEL或者是些其他语法。那么这些语法呢，很有可能啊，浏览器不能认识啊，其实最新版本浏览器呢，对一些一些高级语法的可能也不认识，更何况一些IE，一些八或者是更更低级的浏览器，他更不认识。所以这时候呢，我们也得需要有一个工具啊，需要一个工具能够帮我们啊，将这种浏览器不能识别的语法编译成浏览器能识别的语法啊，需要一种工具能帮我们进行编译。对吧，可能将来啊，你还写了一些其他东西，这个东西呢，也许要使用另外一个工具啊，继续进行编译处理。那么这一个小工具啊，在过去呢，我们得分别进行维护，就非常的麻烦啊，非常麻烦啊。那么所以呢，我们前端就提出一个概念叫做构建工具啊构建工具。

构建工具的意思是什么呢？就是我呢，找一个大的一个工具啊，这大的工具呢，将这些小工具的功能啊，都给包含进来了啊都包含进来了。哎，那么此时啊，我只要关心这个大工具如何使用就OK了，因为这个大工具呢，就能把这一系列小事情啊全都干好，诶，那么这个大工具呢，我们就叫做构建工具。哎，那么到这，哎，同学们明白了这构建工具的意思吗？他就是将我们前端这一系列的些需要做的一些小的操作呢，把它整合成一个大的工具，那它一次性全部能干完，诶这样的工具呢，就叫构结工具。而我们学的这个pad，诶，就是构建工具中的一种啊，Pad就是构建工具的一种。好了啊，我们解释清楚了，第一个概念。接下来再来看第二个概念啊，第二个概念，第二个概念我们回到这个课件。We呢，它叫做静态模块打包器，静态模块打包器好，那什么是静态模块打包器呢？诶我们将代码呢进行稍微修改一下，我们来解释一下这个概念啊，静态模块打包器。

好回来吗？我们找到这个ES啊，这个index JS文件，JS文件啊，那么大家再看，如果你学过。这些RA开发或者view开发，这些模块化开发的话呢，你会就知道我们在写代码的时候呢，我们通常会在一个文件中引入我们整个啊，整个文件所需要的所有资源，比方说啊，我这里就叫做引入JS。哎，将来呢，我可能要写样式，我还要引入样式资源。比方说我们来随便来写一个啊，就是这个。对的吧，哎，我们在开发的时候啊，就是这样去引入样式的，哎呀，好重新写一下啊。好，那可能呢，你还要引入一些其他资源啊，比如说图片啊，哎，字体啊等等一些资源啊等资源，或者是等等资源。

等其他资源。啊等等我就不写了啊，就是你要引入很多很多资源。好，那么这些资源呢，都得交给构建工具去处理，那构建工具外派怎么处理呢？诶。我们啊，首先要告诉派一个打包的一个起点，就是入我们所谓的入口文件啊入口文件。那么外派呢，就会以这个入口文件作为起点去打开始打包啊，作为这以这个应该为起点开始打包好。那么它呢，会将每一个这样依赖啊啊都给记录好，形成一个依赖关系树状结构图啊，依赖关系图，哎，比方说我们这儿呢，就是是最外面的一个，最外面的一个结构啊，它它下面呢，又有两个，一个是RY啊这个依赖，一个是呢这个这个依赖啊。那么形成一个这样的依赖关系图。

形成好之后啊，他就会分别通过这个依赖关系图呢，先后顺序啊，依次把这些资源呢也引进来。引进来呢，形成一个东西，我们叫做。引进来形成的一个串，这串呢，翻译过来叫代码块啊，代码块块。就是将这些代码全都引进来，形成一个代码块好，然后呢，再对着代码块呢，进行各项处理啊，这各项处理呢，比方说将let编译成CSS啊，对吧，还有less文件要译成CS文件。是不是诶有JS资源的，要编译程啊，咱们浏览器能识别的一些S语法。等等操作啊，那么这些操作呢，我们统一概括一下，就叫做打包。对吧，就各种操作嘛，我们统一概括一下就叫打包。然后这打包后呢，将这些啊处理好资源输出出去，哎，输出的东西呢叫扳。搬到。大概就是这样的过程啊。

就是根据啊，我们这个入口环节的依赖关系，将这些资源呢全部引进来，诶引进来呢，形成串卡啊，我们叫代码块。然后再根据这个串，按不同的资源来进行不同的处理啊，不同的处理啊，这个处理过程呢，我们就要打包。打包之后呢，输出出去，输出去的文件呢，我们叫B啊，输出去的文件呢叫B好这几个概念呢，先要记住啊，就尤其是这个串和B要知道啊，先先先大概清楚有这样一个概念。那么简要概括呢，现在就是它就是一个所谓的静态模块打包器。这些index jary这些东西呢，我们统称为模块啊，或者说静态模块模块。经过某种处理，哎，就是所谓的打包啊，经过打包处理之后呢，哎生成的资源呢，我们就可以平稳的运行了，哎就可在浏览器呢运行看到效果了。所以叫做呢，静态模块打包器啊，静态哎，静态模块打包器这样的东西。

好了啊，那我们呢，再回到这个课件中来啊，来看一下。再看一下就是这里面呢，我们说的一些比较具体的一些介绍，就是外派呢，它会将前端所有资源啊，资源样式资源，图片资源等等资源啊，都会当做一个模块去处理。然后呢，它会啊，根据这个模块的各种依赖关系进行静态风险，最终呢，生成一个经过打包啊，经过打包生成一个静态资源，我们叫豌豆啊。就这样的个过程啊，那么这张图呢，也是啊，就是把各种资源呢，他们依赖关系呢，汇总而成，然后最终呢，经过外派打包哎，最终输出出去成为扳导。好，那么这就是我们的一个外派的一个概念。好了，那同学们，你们知道了解了，清楚了这个外派吗？