34-尚硅谷-webpack从入门到精通-webpack详细配置之output

叫做output。好，我们来看一下Vs code写个配置啊，把29呢复制一份，我们就把29复制。然后呢，来一个30。重复一下啊，30OUTPUT。来看一下output里面呢，有哪些配置呢？我们可以仔细看的，有的删掉了啊。打开这个。啊，这个派啊。好，这些都删掉啊，入口呢，我们就作为单入口去研究啊，别的就不看了，作为单入口研究。OK，那么这配置呢，是个非常基本的配置。好，那么output呢，有两个我们用的很长的很常用的啊，Name是我们的所谓的文件名称。对吧。环节名称。那么文件名称这里面呢，我们说了，它也是可以加加我们的目录的啊，也可以加目录的啊，就是它除了指定名称呢，还可以指定这个目录。

啊，指定名称目录这个结果。而且这是将来啊将来。所有资源输出的公共目录。所以将来不管是CS也好，还是图片也好，它都会输入到这个表的下面。啊，具体是必要的，是必要的，下面的哪里就看你这个输出的资源里面有没有再去进行额外的配置。呢，它是所有输出资源的一个公共目录。那么比方说我入口文件就会受这个file name的指引，所以呢，它会在build下面呢多一层JS，然后名字呢叫name name就相当于创name的这个名称啊。好，那么pass。除了pass个，还有个资源，还叫这个也是非常有用。

一般我们只为斜杠，而且一般适用于生产环境啊。呢，也是所有。所有输出资源的。公共路径。而且这个路径呢，是公共路径，补充到这个路径的前面啊，是路径的前面。那么比方说吧，我们整个输出路径是怎是怎么一回事呢啊。它是所有资啊，应该不叫输入资所有资。引入的公共路径。而且引入公共路径的前缀。啥意思呢？譬如说啊，就是将来呢，我们有个图片路径，比方说啊，一个图片路径呢，它路径是images下面的什么JPG，对吧。那么经过这个东西路径的处理呢，因为是公共路径的前缀嘛，所以它路径就会变成斜杠image，斜杠P。

那么写案的话呢，如果你会一些伏羲知识就知道。这样的路径啊和这样路径呢，是会有些少啊，是这样的，这样路径呢是当前路径下直接找这个images啊，而这样路径的斜杠会以当前的服务器地址去补充啊，赋予当前服务器地址补充，然后去服务器根目下找这个image目录，然后再找这个ADBG。当我们码线的时候呢，我们更向于使用这种路径，所以会通过来配置一个公共的一个路径。注意这个路径不是只是我们输出到本地哪里呀，不是只是输出到哪里，而是我资源，比如说我标签引入这个资源，我资源前面要不要加前杠。设置这个就加，没设置就不加，我的样式文件，通过立刻标签引入它，要不要加这个路径，我的image标签要不要加路径是这个意思。所以我们也看一下，我们可以输出一下。看看结果你就知道了。

我们在终端打开运行一下。好，这时候打开必要的啊，看in没有，你看之时候呢，它是JS下面的many JS，之所以是J下面的many JS呢，因为我这里写的是JS下面many JS。所以它这里路径是GS下面的面积GS。如果前面我们想加个斜杠的话呢，Public pass加上就可以了。啊，行。好，那么再看HL啊，那么前面就会多个斜杠了。所以前面这个斜杠呢，是因为这个public pass加加上去的，它决定的是我这个资源引入的时候的这个路径啊，而不是输出的路径，要注意啊，Pass。它一般用于生产环境，一般用于生产环境。好，那么还有什么呢，还有。还有一个叫t name啊，这个呢，我们将来可能会用上。哎，比方说name哦，点JS。好进能决定什么呢？它决定是非入口。

的这个名称。非入口串口的一个文件名称啊，非入口串的。什么叫入口创客呢？ENT指定的文件就叫入口串口，单入口就是单个入口，多入口呢，也就是多入口串口啊，只要你不是单入口和多入口额外的窗口，那么就由他命名。那么怎样产生额外的串呢？有两种方式，第一种通过M这种语法，它会一个文单成一个串，所以这个名称会采用这个命。式。那么S里面创客呢，也会遵循这个名称。我们以第一种为例来测试。举一个例子啊。比方说。我们引入这两个文件。我们呢，这个我们就通过import去导入啊。

导入这个文件。好，然后方法代表成功啊，成功的回我们。啊，预习代码啊，解构赋值提取这个，因为是默认暴露提取这个default啊。那么命名为这个I，重命名为这个A。好了啊，然后呢，我们来去调，这是第二项啊，因为dispo它是一个关键字啊，我们不能用，所以我这里重命名了一下，叫做ADD。这个这个语法意思是呢，对咱们这个值呢，进行解构赋值，提取这个默认的这个default变量，重命名为A，然后后面呢，去引用这个ADD啊。好，这时候呢，我们知道啊，一旦这样写的话呢，ADD一定会被double打成一个串。我们可以对比一下，不用它用它有什么区别。不用它的话呢，它的命名规则呢，会采用这个file name去命名，所以取用name加S。所以最终的输出的结果呢，它会叫做零，因为咱们这个串卡它们都属于入口，所以他们默认是叫main。

江边的话呢，就会冲突，所以呢，我派呢给他们另另外一种命名叫做ID命名啊，就是零，如果将来还有就是一，将来还有就是二，就是这样去命名，这样呢就避免命名冲突，从而导致两个文件是同一个文件。那么零的话呢，非常不好看，所以我们通过它进行命名整改。好，这时候你会发现它的名字呢，就叫啊零串口放到DJS，并且输出呢，没输入到JS下面去啊，没输入到JS下面去，因为我这里没叫JS。要去GS的话呢，这里要加个JS目录啊，那我们再运行的话呢，它就会输出到JS目录下。哎，你看是不是叫做JS下面了，叫零杠创的JS。所以呢，这个串口方呢，能够对这个非入口串口的名字啊，进行整改啊，进行修改，你想改什么改。如果你不整改，他都会走这个file name啊，都会走file name了。

好了，那么这是这个串法内，这也是我们啊，将来当我们要分割的创口很多的时候，哎，就会通过这个方式呢，去给他加些东西啊，这些东西代表呢，它是单独分割成的一些串口。好，除了呢，我们将来还用过，之前还用过一个东西叫library。Library。这library有什么用呢？诶，我们看一下之前我们输入的文件，比如说。Main的话呢，整个外面啊，它其实就包了一层函数啊，就包了一层函数而已。是这样的一个结果啊，然后调用把这些作为，把这些参数的作为参数传进去，是一个这样的结果。好，那么所以这里面内容呢，都在函数作预下，外面想要引用的话呢，是不能的。那我想把这里面的内容暴露出去给外面使用的话呢，诶library就能撤销了。Library的话呢，我们来看加上一个name，我们看执行结果，就是能看到结果。

他们全局向外暴露数据的变量name。那么因为我的这个name呢叫做may，所以我暴露的这个变量呢，就叫做may了。所以外界呢，当我引入这个JS文件呢，就能找到这个main这个变量，从而使用里面的值啊。就类似于这样的。那么这个变量报的分费者呢？还可以通过library target来指定。比如说指定为window。那么我这边呢，就会添加到window下啊，而不是直接简单的挖定音，我们来看啊。哎，你看就是添加到window下。所以这个方案呢，适用于啊咱们的。Browse端对吧，娱乐器端。那这个呢，意思就是全局啊。整个库。向外暴露的B0。那么下面的意思呢，就是这个变量名啊。

添加到对吧，哪个地方去。添加哪个。哪个上面啊，比如说这里面是。那如果你在平的话呢，你可加到上啊在这里写。那么就是no平台啊，一般就是服务端。好，也可以这样指定啊，也可以指定，比方说它的值为。那么它呢，就会整体会通过common方法去暴露，我们可以看一下。所以这样呢，就达表我将来想打算以common方式去引入他啊来看你看就是通过common法则就暴露这个了。好，当然还可以别的规则，比如说AMD啊，这些语法规则啊，都可以设置啊，我们就不一个测试了。所以这就是也可以通过library，将这个库呢，直接向外出去，外面可以直接引入使用。那么引入规则呢，你可以通过到window上，也可以添加到global上，诶，也可以通过一些模块化语法去做去引入啊，这也都行。

好了，那么这些呢，就是这个内容，那么library呢，一般是作为暴露一个库去使用它通常是结合我们的deal将某个库呢进行单独打包，然后我引入使用，这时候才需要使用library。如果你正常打包的话呢，Library呢是一般不用的啊，一般不用的，所以就不需要用这个library。而我们一般要是打包在浏览器平台，所以那呢，你可以指定为window啊，当然也可以不指定，因为不指定的话呢，它也是全局的一个变量啊。这变量。好了，那么这以上呢，就是我们output的一些参数设置啊，By name pass，我们老顾客了。Public pass呢是指定所有公共资源的一个啊，引入的一个公共路径。创name呢，就是对串，咱们打包的非入口串呢，进行重命名，进行命名整改。而library呢，通常是结合我们的deal一起去使用啊，将某个库呢全局暴露出去，这样呢，我就可以直接引入使用了。好了，Output呢，还有很多配置的信息啊，当然其他配置呢，我们就用的非常少，以上这些配置呢，是我们开发的时候用的比较多的啊，所以大家呢需要掌握一下。