44-尚硅谷-尚医通-前端知识点-webpack打包工具

各位大家好，刚才内容中的给大家演示了ES6的模块化，包括转码工具的使用，那咱们下面继续来演示前段中的另外一个内容，它叫做web派。那web pack是什么呢？我在这里边给各位先做一个介绍，然后咱们演示这个工具到底该怎么去用，给大家强调，首先各位要知道web派呢是一个打包工具，什么叫打包工具呢？给各位强调，比如大家看啊，我们一个项目中是不可能会有很多的JS文件。而这里边可能还有很多这种CSS文件，而现在如果说有很多JS文件也好，有很多CS文件也好，那我请求的话是不是要发送很多次请求啊？而现在用while pack可以做件事情，可以把你的多个文件打包成一个文件，比如我现在。有四个这文件最终打成一个文件，然后咱们再发送请求，是不是只需要请求一次就可以了，这就是外包派可以做的事情，就是一个导播工具，它可以把多种静态资源文件，比如说JSCS等转成一个文件，减少你页面的进入次数，这就是web派可以做的事情，叫做打包工具，那这个东西怎么去用给各位来。

详细演示一下。首先我们看啊里边的第一步。咱们需要先安装web派这个工具，这是它的第一步，那这个工具我们现在先装一下，我就直接执行命令NPM，因此的杠G全权安装web pack web pack咱们把它做安装，这是我们的第一步，那我现在把它就装下。首先在里边呢，比如咱们一会儿演的是web派，那我现在我再建个新的文件夹，我叫这个web。

太。DEMO，然后在外部还有个DEMO中，咱们把这项目也肯定做个初始化，因为咱一会儿要用到initt-Y做个初始化操作，然后初始化操作之后，在这里边我们来再打开一下，咱们把那个相关的工具装上，做一个选卷装，现在不对说，然后他就会联网去下载webpa，还有webpa下载外，咱们等它联网先下载完成，如果下载成功之后，咱们用web派杠V能看到它的版本，如果有版本的话，那证明我们应该就下载成功了，那我们稍微等一下，等他下载完成。这应该很快，你这东西不是很大，因为通过这个联网就可以下载，咱们之前应该配置过是那个淘宝镜像，所以现在完成了，完成之后输入命令。Web pack-V，然后咱们配车，大家看在这里边呢，是不是有一个版本的出现，所以证明咱们现在web pack就安装成功了，这就是里边的第一步，先安装它的工具。

然后这个做到之后，下面我们再进入到里边的第二步操作展开，第二步我们应该做什么，那我们看一下我的课件中啊，第二步咱这项目线初始化都做过了，因为现在我要打包多文件，所以一会儿我这么做，我先建个文件夹。然后里边建两个data文件，然后把它们进行打包，做这过程，那我现在进入到我们的。第二步操作。就是咱们现在第二步。创建JS文件，实现打包。那我来做一下，我在这个项目中建个目录，就叫src，然后在src里边，比如现在我来创建两个文件，一个是。01点这一次还有一个是。

02点这个文件，然后在两文件中我们写上一段内容，这个内容我就从课件中直接复制了，比如说零一里边我就写这个内容。把这句话直接拿过来。然后这内容咱看一下啊，Is put info就表示可以被别的调用，包括你可以写isport depot一样的，然后在里边呢，我们加上这个相应的方法，方法里边呢，这方案名字其实就叫info，然后方法中我们加一个叫document.right。不知道各位这句话是否知道啊，咱之前一直写一个叫conso.logo是不是在控制台输出？高点right就表示通过浏览器访问页面中能输入那种，就咱一会儿通过浏览器来测试，那这是第一个页面，我们写上info这个方法，然后第二个里边呢，我们再写一个，假如写这个。就来一个ADB方法里边实现两个数的相加啊，当然你可以写更多方法，我就以它为例了。

所以现在我们写了两个文件，一个零一，一个零二，然后下面做件事情，我想把两文件打包成一个文件，就是在一个文件中既包含这个方法，也包含这个方法，那我看怎么做，就是现在在里边呢，我们再来创建第三个DS文件，我这里创建。假如这个文件我们起个名字叫做men.gs然后在问点GS中，咱们把零一和零二都给它引入进来，然后最终再做调用，那我现在再做引入，比如这里边我们引入咱可以用ES6的方式，当然ES6有一个不方便地方，是不是还要转成ES5，所以我就直接写ES5代什么，就加个锐块做这么一个引入。那我来写一下。我们来一个constant，这是第一个，我就叫这个，呃，就叫A，然后等于这个。我们加一个request。加上这个点杠，然后加上这个零一.gs把它做一个引入，呃，加个引号啊，然后点杠。

零一.gs这是第一个，然后第二个呢，我们也是做一个引入。第二个引入，比如我起个名字叫这个B。然后在里边引入零二.gs这样的话我们就完成了引入，然后完成引之后，咱们可以实现一个方法的调用，那我来调一下啊，因为在我们的零一里边有一个in for方法，就是a.in for。然后在里边呢，我们可以输出一段内容，假如这个内容我就来一个哈，因为这个内容或者浏览器输出，然后这里边还有一个BB，里边实验的是两个数的这个相加，那我们写一个，比如来一个一，来一个二。这样的话，我们就做这个事情，或者各位是否能看的话，咱们在info里边又去调A的方法就是把最终输入就是哈，然后加上这个三。

是咱们写的第三个文件问，点JS里边把你要进行打包的文件引入，然后最终做调用。这样的话，咱们把这一步就完成了。就是实现了这个操作。编写解读文件。我把这个给各位拿过来，然后这个做到之后，下面咱们再进入到我们的第三步，那第三步做什么呢？因为你要做打包嘛，所以现在我们就要创建一个打包的配置文件，在里边配置你的相应的。这么些内容，那配置文件呢，是一个固定名字叫web pack com JS，所以咱们来做这个事情，我写一下里边的过程，就是我们的第三步。我们来创建一个配置文件，然后配置文件名的固定叫web pack com.S那我现在在里面创建。

咱们来创建这个配置文件，然后创建之后在里边加上内容，这个内容我们就不需要各位敲笔，咱们把它拿过来，然后咱给它快速改成我们的这个内容。那我们看一下啊，首先第一个是引入内置一个模块，然后第二部分我们有一个这个叫import。然后在里边你看啊，在这个过程中呢，我们就是表示一些基本值，首先第一个entry。什么意思啊，是不是你的入口就是现在我通过那个文件打包，因为咱们有这个问点JS，最后通过问点JS进行打包，表示你的入口，咱们的入口应该就是这个路径S2C。加上这个叫man点宅啊，应该就是我们的这个路径，这个不小变，然后第二个是一个叫output，什么意思啊，是不是就输出啊，设置你输出的内容，输出的话，首先第一个比如我们给它输入到这个目录中去，我在里边创建一下这个目录叫Dis，然后这里边就是你输出之后，它那个输出的文件叫什么名字，就是你打包之后文件叫什么，比如咱们叫bund.js。

这是关于配置文件的这么一个修改，写上你的入口，写上你打包的路径，包括你打包之后的文件名称，这就可以了，然后可以之后最后一步，咱用web pack进行这么一个打包操作就可以实现。那我来写一下。这是第三步。然后这里边还有第四步。我们使用命令进行打包，这命令就叫做web，开口就可以了。这样的话，咱们把步骤就说完了，然后最终我们来做测试，但是打包中大家发现啊，后面有这么一个参数叫杠杠mode。Mode什么意思？是不是叫模式啊？它的模式有多种，你看这个模式叫开发环境，当然还有什么测试环境，还有什么那个生产环境，那我们就以它为例，咱们最终来把它做一个打包。

那这个给各位复制过来，然后咱们来到这里边。我们来做一个执行。就是web pack，杠杠mode，然后这个develop。然后咱们给车现在就开始做这个打包，咱们看啊，目前已经执行完成了，并且他也没有报错，证明你这个就可以了。我把它接过来，然后咱们看一下最终的效果是什么样的，我们来看一下啊，因为大家注意我刚才配置的打包路径，是不是在地里边，里边有方调点JS大家看到。文件是不是有了，把它打开，里边是不是有内容，他就把两个文件内容打包成了一个文件，就是咱们看到的这个效果。所以这样的话我们就可以了啊，然后可以之后呢，咱做个测试，因为我刚才呢，在这里边我们是把它做个输出，这输出用高点right会在浏览器中显示，所以现在为了测试，我在里边建一个H调文件。

然后在H项目中，咱就把它那个JS文件给它引入进来测试就可以了，那我来引入啊，我们来一个S2C。然后这个路径就是我们说这个点杠。第里边这个方点GS这样的话就可以使用了，然后咱们直行下。看一下效果是什么样的，大家看啊，里边是不是就是哈三应这是我们刚才的输出哈，是我写的这个值三就是一加二的值，是不是就可以了，所以这就是关于web派的一个打包的这么一个演示，咱把它就完成了。所以各位把这过程自己能测试出来就可以了。这是关于这次打包。然后JS可以打包，刚才我提到web pack呢，能打包多种类型的静态文件，包括GS也包含什么CSS，就是样式文件也可以，那我下面给大家打一个样式文件大看怎么做啊，这个过程我们就按照课件快速演示一下啊，首先第一个我们先安装一个样式这么一个。

加载器或者一个工具，把这安装就是style load CSS load，那我在里边执行一下。咱们回车把这工具给它装上，然后装上工具之后，在里边的的配置文件中，咱需要给它改上这么一个地方，就改成这么一个地方。那我们先装成功，现在可以了，然后咱们改一下配置文件。怎么改呢？大家看啊，之前的内容不能变，而你要加新的内容，而它新的内容中的大家看多了一个什么，里边有output这里边也存在，然后在output这下面是不是多了一个叫。

Model。Model中是不是多了一个叫？Rules，所以咱把这部分给它就拿过来，因为这是我们多出来的内容，然后把这部分不知道里边来。我加个逗号，把它做复制。这样的话，我们就完成了这么一个地方，然后看一下它的括号的位置应该在这里，这表示这是它的这么一个就是加载的规则。Style load，再load指行到我刚才下载的工具上，给它进行一个使用，然后这个做到之后咱就往下做，下面呢，我们就创建一个set文件，然后在main里边引入，最终进行就是这么一个Y派打包，然后咱们可以做个测试，那我现在来写一下。比如现在呢，我在这里边呢，我来就是创建一个CS的文件，我就叫这个。style.cs然后在里边呢，比如我加上一个样式，再来一个body，然后里边我写一个叫bike color。

比如来一个这个read。对的明显了，这是什么背景作用，然后这个写完之后，现在呢，我们怎么做，在main里边把这文件里头引入进来，咱们加一个叫块。然后里边加上这个点杠。style.css这样的话就可以了，把它引入，然后引入之后呢，咱把这文件重新做一个打包，就重新做一个外派，这个我先删掉，然后咱们执行我们刚才的那个命令，Web pack，杠杠mode development，然后咱们给车。我们看目前这里边应该是做了一个打包，但是他目前呢，报了一个错误啊，咱看他了什么错误，看他这特点啊，应该是哪里写的不对，首先我们看一下。

啊，咱们看啊，他说呢，这个东西不能用，就是加载的模块找不到或者失败，那我们看一下问题啊，大家看啊，这问题呢，我们看到啊，你看我这里边，我这文件改完之后，刚才好像没有保存吧，应该是这个错误，咱给它保存一下。然后这里边我把这命令再执行一下，咱们再做个测试啊，这个我先给它删掉，咱们再重新打包用web pack杠杠mode development。然后咱们再试一下，你看啊，目前是不是成功了，刚才是我文件没有保存，然后这个做到之后，最终我们在做测试，在我的HT中引入JS文件，因为咱有包，然后咱看一下目前的效果是变成了红色啊，虽然难看点啊，但是这效果出来了。所以这样的话，我们就通过外派完成了CSS和GS这么一个打包过程，大家把这过程给它能自己测试出来就可以了。

这外派也是我们在前端中一个重要的工具，各位把这个必须要知道。所以说到这里为止呢，我就把这个前端中一些基本的知识给各位多多演示，包括咱们前天讲到的ES6基本语法，Voe中的监管指令，包括这个axs的R级请求，以及note JS，包括咱们现在说的NPM包管理工具，模块化操作、背包转码器、外包派打包工具，这些前端中的基础知识各位都需要掌握。所以现在这些内容我们就都演示完成了。