day04【项目前端相关基础知识二】/13-尚硅谷-谷粒学院-前端技术-webpack打包js文件（1）

那我们演示外派按照我文档中的步骤，这步骤不需要各位去记，因为是一个固定的过程啊，那咱就一步一步来做一下啊，我来写一下啊具体步骤。在这里也写啊，首先第一步操作。咱就需要安装这么一个叫web pack的这么一个工具，或者说web pack的一个插件，这是第一步，你安装它之后才能用到我们这个校园功能啊，这是第一步，那第一步怎么做呢？然后看我的课件中，咱们需要在里边就是用n PM in install，然后加一个叫杠G。杠G表示就是全局安装，在安装这个web派这么一个工具，而工具中大家仔细看啊，有两个工具。一个叫web pack，一个叫web pack，这个叫c Li。C是什么呢？就是客户端，客户端，所以咱需要把这两个给它装上。这是它的第一步啊，也就是说你在这个里边运行就可以了，我先截过来，然后咱们说一下哈，具体怎么做。

这是我们用命令安装，那我现在测试一下啊，比如现在为了我们效果明显，我先都关掉在里边呢，我就再来建个文件夹，做我们的web pack，这个文件夹起个名字就叫web pack DEMO。然后创建之后，按照我说的啊，咱们现在这些文件夹是不是都需要初始化呀，咱们给他来一个初始化，就来一个npitit。杠Y啊，做个初始化操作啊，这些都是准备工作，咱做到了啊，然后做到之后咱把这个外派DEMO用终端打开，把刚才我们那个命令在里边执行，就是n PM in此的杠g web派和webpa set外在一回车，它就会联网去下载，把两个插件会下下来啊，这是我们要做到这个事情。

这各位知道啊，因为这个插件我已经提前下过了，不在课上浪费这个时间了啊，各位把这命令一回车联网就能下载下来，而下载之后咱可以用个命令来看一下是否成功，这命令就是web pack-V啊，那我们来看一下啊，因为之前我是下过的。Web派杠V单一回车，大家看里边。咱们等一下啊，出来了。这就是显示我当前web派这个版本号啊，当你看到版本号，那就证明这个东西已经安装成功了。这是我们要做的第一步操作，安装这个工具啊，这各位知道啊，然后这个做到之后，下面我们进入到里边的第二步操作。然后第二步我们要干什么呢？就是第二步操作中啊，我们就需要建一些准备工作，因为咱要打包多文件，那第二比如说我这里边就建两个JS文件，然后按照它的结构往下实现。

啊，那我写一下啊，第二步操作咱就是创建。JS文件。然后就是用于这个。打包的这么一个操作啊，这是第二步，那这个我们来创建一下啊，我就按照课件中这个例子啊，咱直接用它创建了。那现在我这么来做啊，比如现在呢，我在web派下边，我们先建个文件夹，我就叫src啊文件夹，然后创建之后在src下边咱们创建JS文件，比如说里边的第一个JS文件，我叫这个common.js啊，第一个文件名字可以随便起啊，我就按照这个例子啊，然后文件中我就写这么一段内容。把这个拿过来。这内容咱看一下啊，其实这个也是一种写法啊，就跟咱之前写那个is support那一样，它就表示这个方法名字叫info，然后这个方法可以被别的宅子调用啊，这也算一种写法。

然后在写的过程中呢，在里边有这么一行代码。我强调啊，这行代码。不知道各位啊，这一代码是否知道啊，我给大家说一下啊HJS中一个内容就是咱们之前呢，我们写代码中，我们应该都写这个叫conso.logo。conso.log的效果就是在控制台是不是输出，但是现在我写这行代码什么意思啊，document.right它就表示啊，这个内容会在你的浏览器中输出，所以咱一会测试就需要写个页面，把这内容要在浏览器中输出，你ctl.log浏览器中不会输出，但是我写document.right它会在浏览器中输出。写一下啊，就是浏览器中输出的这个内容，这叫document.right啊，为了咱一会儿方便，因为咱又有样式，没有浏览器样式看不到啊，这是第一个文件我们创建了，然后创建之后第二个咱再建文件，然后就叫这个u to.js。

啊，这个如果你不理解，咱一会儿看效果估计就能看懂啊，浏览器中会把值就会显示。然后第二个我们再建个文件，要这个U条件JS在里边呢，我也是比如随便就写这么一的代码啊，这个代码的是做的适应，就是把这两个值做个相加，然后它的方法名是A的，它可以被别的J调用啊，这是我们建的两个文件，那我们就做到了啊。然后创建之后呢，我们下面怎么做呢？给大家强调啊，下面呢，咱需要建第三个文件，然后在第三个文件中，把那两文件都给它怎么样。是不是引进来啊，然后做调用，就是再写文件，引入另外两文件，然后最终我们才能做打包啊，所以第三文件我们要做这个事情，把另外两文件都给它引进来。那咱来创建啊，在里边我在创建一个文件，比如我叫这个man.JS。

然后在MGS中，咱把另外两个文件都引进来，咱就直接写ES5了，这E6还得转换，我直接用ES5啊，我们叫这个快。就是Q，然后在里边加上你那个路径，就是点杠，第一个叫common。然后咱们给它起个名字啊，比如我叫这个common，这是第一个，然后咱们再引入第二个叫那个。就加一个叫快。然后在里边加上这个叫点杠U，这两个我们就引进来了啊，当然后面这S可以省略啊，我就给它加上吧啊，不写也对啊。然后加上之后，咱为了明显在里边呢，我们就给它做一个调用啊，为了咱效果更明显，因为在common中有个音啊，那我们先调它啊。Info。然后info中，比如做个输出，我就叫这个hello。

然后输入之后，这里边还有一个叫U啊，U中的又一个方法，它那个方法叫A的就是相加，比如再来一个一，来一个二，然后把这方法我也写到这位中来啊，为了他最终能做输出。因为这个inform它会向浏览器页面中输出内容，在在里边直接做调用啊u.a就是把这个值返回，然后通过它输出，其中咱输入就是hello common加上你这个值就是一个三。这个啊，我们写到这么三个电子文件啊，这咱就做到了啊。就是我们做的第二步操作。我把这个啊给大家接过来。是这个位置啊。然后我在里边写一下啊，我们是怎么做的，首先啊，我们的做法就是在这个位置，咱们创建是三个。JS文件，然后在三文件中我们带这个就是common.js。

还有这个叫u to.js中我们就是定义它的一些方法和一些输出，然后写完之后我们下一个在这个就是问点JS里边，我们就是引入了这个common和这个us啊这个内容，然后最终就会调用，这是我们做的第二步操作，为了咱们最终打包使用。啊，这步完成了，所以大家就这过程啊，然后做完之后，下面咱就做第三步操作，那第三步怎么做呢？咱就开始做这个打包，但是你要用web pack打包，咱需要创建一个web pack的一个配置文件，这配置文件的名字是固定的啊，里边内容是一个固定结构，这个不需要各位去记，咱给他改就可以了，那我下面创建啊，就是第三步。建一个web pack配置文件，然后做打包。给大家啊，写到下边啊这个位置。

就是。第三步，创建web pack的配置文件，配置你那个打包的一些信息啊，把这做到，然后它的配置文件是一个固定名字，就叫这个web pack config.S这名字是固定的。咱们来创建一下啊，创建的话写到你的根目录下，就we派DEMO下边建这么一个文件，这个名字啊，不要改别名字固定的，然后写完之后咱把这内容复制过来，咱用它改一下啊，因为是固定结构，然后咱看一下这个内容啊。看他什么意思啊。首先第一句话是no，宅中一个固定的一个内置模块，就是为了取路径，然后写完之后，下面一个叫model is port里边有它的值，这值里边咱主要改的是三个地方啊，就是这个地方，这个地方还有这个地方。那什么意思，给大家说一下啊，第一个地方，咱们这个单词entry。

安TRY这单词各位我觉得应该认识啊，它是不是有进入或者说入口意思啊，就表示咱们程序打包的入口，而咱的程序你注意啊，在man.JS中是不是就有另外两文件，所以这个man.JS就是咱们程序的入口，所以在里边写上门点GS代表你的入口啊，而咱们写路径就是点杠src，门点G啊这么一个地址。比如大家重新写一下点杠src加一个叫问点点S，这是第一个程序的入口，然后第二部分这个地方。大家看这单词，Output。是不是输出意思啊，它就表示啊，你输出就是你打包之后，文件给到输出到什么地方包，你的文件叫什么名字，我这里边写了一个叫Dis，那咱一会儿文件就放到这个路径中，但这路径没有，我在里边创建一下啊，咱来一个文件夹叫这个。

Disco，最终文件放到这里面去，然后文件给它起个名字，比如我们一会儿打包之后，文件就要这个名字叫bund.js啊，这是我们最终生成的文件名字，所以这是一个配置文件，如果要改的话，三个地方，第一个程序的入口就是咱们里边包含另外文件，第二个就是你打包之后输入到哪个路径，这是你的文件夹。第三个打包之后的文件名字，我们叫b.S啊，这是我们的配置文件。也就是我们对应的第三步。这个啊，我们就做一个说明啊，就是这样啊。我把这个给大家啊。换个颜色啊。第三步怎么来做啊？然后这一步做到之后，咱这些准备工作都完成了，最后进入到就是第四步。第四步呢，做法就是我们直接使用一个命令就来执行这个打包操作就可以了，然后这个命令是什么，咱们看一下啊，命令很简单，就叫做web pack，或者说你加一个打包模式啊，一会咱会演示你直接写web pack就可以打包加个模式，然后让他根据不同情况打包，比如你是BV开发模式还是生产模式啊，看它的实际，所以这个啊是咱们最后这个。

我把这个啊，两家截过来，然后咱们一块儿来演示啊。执行命令，要么是web派，要么是加上这么一个model啊，就model这个模式。所以这是关于我们这个步骤。啊，所以咱们把这个前三步都完成了，最后需要就是第四步啊，第四步咱们下一课再来演示道，大家把这过程也知道，我最后重复一遍啊，Web派是一个打包工具，它可以把我们的多个文件打包成一个文件，比如我现在三个JS文件，最终会生成一个文件，然后过程就是第一个啊，咱做法就是先安装这个工具，然后创建文件，在一个门里边一种其他的文件，这作为那个打包入口，然后第三步写配置文件，就改它一些值。

最后一步用命令进行打包就可以做到啊，所以它主要一个过程啊，大家先给他知道啊。