10-尚硅谷-webpack从入门到精通-开发环境基本配置

接下来我们来学习开发环境的搭建啊，我们将之前所学的东西呢来综合成一起，形成一个开发环境的一个基本配置。好，我们来看打开Vs code啊。我们来新建文件夹，叫零八开发环节的配置。好，那么在这儿呢，我们主要是写配置啊，来新建一个文件叫wepa DV JS啊，S。好，在这儿呢，我们去将我们前面的所有配置啊全都综合起来，比方说像打包样式资源，打包H资源，图片资源，其他资源以及最后的DB server，我们全都汇总在一起，看怎么做啊。首先哎，最外面呢，向外暴露出去一个对象。在这里面呢，诶，至少有五个基本配置，加上最后一个低于server配置，一共有六个。分别叫entry入口啊入口呢，还是SC下面的DS文件。好，第二个呢是输出output啊输出呢，诶有两个操作，两个操作。

一个叫file name，那么file呢，是文件名，我们叫bills。第二个叫pass pass呢是输出的文件路径，哎，一般呢要求用到绝对路径。而决策路径呢，需要引入一个no的核心模块，叫做pass。Pass的方法呢，叫做方法，用来处理绝对路径的啊。好，再通过resolve这个方法呢，传一个杠杠，第2NAME加上必来，构成我们这个整个目录。好了，那么下面呢，我们再来就走啊，下一走，然后呢，通过一个值为一个对象啊，Rules里面写我们所的no的配置。那么我们要处理什么呢？我们处理样式资源对吧？样式资源呢，有less有，所以呢，我们得写相应的配置。比如说检测啊，Test一个正则表达式。

检测的文件呢，是以点less结尾。那么使用什么规则呢？诶使用呢，通过use值为数组来去传的配置。比方说。和我们这个来处理less文件。那那除了使用less的话呢，哎，你将来可能还要处理其他资源啊。除了要处理资源的话呢，你样式可能还是CS资源，比方说啊，你可能要引入一个重置样式的。所以这样呢，我们还得再去写啊。这样的我就尽量复制了啊。处理三。好检测呢是S结尾，而呢，它可以少用一个less load，而直接使用load就可以解决这个less资源了。啊，处理完CS资源啊，我们后面又处理了咱们的H资源。而HL资源呢，需要使用的插件意。好，这里是它的配置。

好插件的话呢，得去new一个哎拉in h。Vapa。对吧，然后这里面个tablet啊，代表了我需要啊。以某个文件为模板，那么这个文件呢，就是C下面的。那么插件呢，大家一定要切记需要引入才能使用，所以我们上面呢，需要引入这个插件。对吧。好，到这呢，就处理好了HL组。那么下面呢，我们得处理图片资源。图片资源呢，通过UR的处理啊，处理图片资源。通过T啊，一个表达式啊。比如说啊，我们图片呢，可能是一个JPG啊，也可能是这个PG啊，也可能是咱们的这个GF啊，就这样写就可以了。好，一旦匹配上，我们呢，使用某一个load去数列，通过load修写啊，这load呢叫做U。

好，那么U呢？我们通常要实验是一个属性，叫做limit啊，八乘以一零。代表了8KB以下图片呢，会经过BASE64处理。同时它的名字太长了啊，所以我们通过name这个字段呢，可以对它进行重命名。输出的这个文件的重命名哈希值只取十位啊，加上它原本的这个文件扩展名称。好到这呢，我们就处理好了这个图片资源。哎，其实呢，这个UR呢，目前来讲只能处理样式中的图片资源。而HM中的图片资源是处理不了的。所以这里面又得再加一个。检测的呢，是咱们。那么它通过一个load处理，这个叫做HL。

那么这个呢，专门用来处理。咱们HL中一位值都不统一的。所以加上它呢，就能够处理图片资源了，但是一旦加上它，我们发现一个问题。HL中呢，它对HL等呢，对这个image资源呢，它会经过去引入。而这个URL的解析的时候呢，会通过E6MODU去解释解析，那么两个模糊化不一样，所以解析就会失败。那为了让他们一样呢，我们让要要让ul呢，使用这个common Mo。所以在这呢，我们需要下一个参数叫yes module first啊，就是关闭module啊，就会开启这个module啊。那么就是这个。好到这呢，我们处理好了图片资源。那将来呢，可能还有很多很多其他资源，比方说自己投标，所以我们还得处理处理其他资源。

好，其他资源呢，就是啊，通过一个C去排除掉，我们需要就前面几个资源排除掉它，那么剩下资源呢，就由我这处理。所以他这个正则呢，需要结合前面的所有东西一起去写啊。比如说哎，我们要排除H资源，要排除S资源，要排除CS，排除less。要排除片JPG啊，PGGF等要。然后呢，使用的呢，是使用的是这个。也是需要对这个名字呢，进行改短一点，所以也是要这个name这个值啊。从这里你会看到，感觉这个follow呢和U的用法好像差不多啊，的确啊，就U呢，是基于follow的封装的一个新的一个库，一个。热的就是无非就是比发的多一个小小的功能，就是它能够去压缩一些东西。

能够将一些比如说能够将一个图片呢，转换成BASE64的方式。所以呢，你可以理解为uroad呢，是在firelo的基础上呢，做了一个小小的优化啊，就是转换成贝14。而发呢，就是原封不动的将资源呢给输出出去。到这呢，我们就处理好了所有资源。那么最后我们加上我们的开发环境配置server。好。分别为看。我们的这个。好ID参数呢是个优化啊，Computer为启动最P压缩。指定移动号，比如说3000。然后呢，自动打开浏览器为出。那么到这呢，我们就将前面的这些配置呢，都已经全部加上去了啊。

那么整体形成呢，我们就叫做开发环境的配置。那么前面也说了，开发环境配置呢？它主要的目的就是能让代码运行即可。就可以了，所以呢，我们这里面要对我们的资源呢，进行各种各样的处理啊，否则一个资源其中某一个资源如果不识别，那么就会报错，那代码就不能运行成功了。假如代码运行成功呢？那所有资源都要处理，哎，那我们全部写好了。同时呢，最后呢，通过DB server呢，做了个小小的优化来大大的节省了我们，提升了我们开发的效率，让我们只要关注云代码，诶，它呢会自动的去帮我们编译啊，自动运行啊等等。啊，就是这个。好了，写完这配置呢，接下来我们就验证它到底靠不靠谱啊，所以我得新建一个C，在这里面写上我们的一些建议的配置。

首先要写的是一个入口文件。好，里面具体的内容呢，我们可以稍微写一个函数啊，代表呢，这是它的一些JS内容。好，就简单打印一下啊。OK。然后呢，我们还写一个文件，就是我们的一个HL文件啊。我们来这里面呢，要写一些基本的结构。这结构呢，因为我们要测试那些字体图标，那些图片的用法，所以我们这里都得都得啊不对。好把它自己图标呢，我们从之前的地方呢，粘过来啊粘过来。哎，这四个CTRLC。啊，我这来啊，CTRLV。然后呢，这几个字体呢，这几个字体文件呢，全都要拿过来，因为待会儿呢，我肯定要用的啊。CTRLC。全部关闭啊，然后拿过到SC下面看音。

好，这图标为了能用的话呢，我还需要在我们的JS中将某一个字体文件引入。那么我们一般是先引入写代码，所以在这里进引入这些其他资源，引入资源。引入我这个iPhone上。啊，引入呢，我才会有相应的自己图标的样式。好的。那么接下来呢，我们再去写点东西啊，这里面呢，我们再写几个结构吧，再写个div I d Bo。然后同样呢，我写个image啊，待会呢，我们还要引入几张图片来测试图片的打包情况。那么我们把这个图片呢拿过来。啊，这三张图片。好拿到我这个SC下面了。好了，那么这里面呢，我就引入这个view吧。啊，没有。我再用这个啊投引一下。呢是个PNG啊是PNG。

那么这是这款啊，引入的这两个图片。好，然后我们再去写的样式，那么写样式的话呢，我们使用lets去写吧，使用lets。好，我就写一下这个box啊，Box宽的200，高呢200啊，Background image。啊，为这个安了这个图片。啊不，No repeat为no repeat size为百分百啊百分百。那么写完样式啊，一定要切记，要想派打包的话呢，都得在入口文件中引入，否则它是打包不了的。所以我们再去引入这个。好，写到这样呢，我们来总结一下啊，那么派呢，它打包的时候呢，会以这个indexs入口去打包。然后发现呢，这里面有两个依赖关系，分别是这个icon.cs和index。然后它首先会引入这个X。在这个中呢，又发现呢，以下这四个字体标文件。

所以这四个to字体图标文件呢，又会被这个i.S引进来。好，再来看到JS，第二个依赖呢是index index这里面呢，会引入一个安这张图片。所以安居这张图片呢，又会作为依赖呢，又被引进来。好，这些资源呢，就会都会被打包了啊，这图片包括那个字体，包括这两个样式文件都会被打包了。好，那打包之后我们来看一下效果啊。右键在动作中打开。通过MPS去启动wi派DVR运行。看效果。哎，你看啊，那么标题四个字体，三张图片，那么就全部出来了啊，就全部出来了。所以呢，我们再看一下右键检查啊，看下这GS代码的运行结果，这个三呢也出来了，没有问题。所以到这呢，我们就啊使用了一个这个把前面的配置呢，集合在一起来完成的一个一个基本的一个开发环节的配置啊，这个代码的运行即可。

好，写到这呢，前面都是一些，我们前面写过代码，哎，只不过汇总了一下。那么这里最后呢，我们需要做一个小小的梳理啊，就是啊这个目录啊，稍微有点乱啊，这个资源呢，乱七八糟的。所以我们稍微划分一下目录，比如说我们目录啊这个。啊，Just对吧。然后目录再来个CS目录对吧，放或者说我们的样式目录吧，叫CS。然后呢，普遍的就images对吧。然后呢，如果其他资源我们就放在一个里面。我们把目录划分一下啊好，那么目录的话呢，我们来一个走图片移进去。啊，图片还有两张，这两张啊。移到这个images里面去。

好，然后呢，样式文件我也一起啊，样式文件一起移到样式里面去。好J呢啊，这三个四个字体图标呢，当做其他资源移到media里面去。JS的话呢，我就移到JS里面去，H呢又不动啊。好，这样一的话呢，我们来看啊，这个目录就稍微的清晰一点啊，下一个啊，然后下面里面些式的内容，Image先放些图片，JS呢，放我这个入口文件JS。Media里面呢，就是一些其他资源，其他资源。好，这样改的话呢，那我这个配置就得稍微处理一下了。首先入口JS呢，是位于JS，所以这里呢得加个JS。X下面找JS下面的index JS，所以这里要改一下。

其他地方都暂且不用改啊，就是这个入口文件需要改一下，接下来还有地方要做的。HL图片资源呢，现在在images下面了，所以这些路径呢得写正确。好，然后呢，这个样式呢，IPhone呢，这里字体呢是在media里面，所以这里面呢，得加个点点看啊media。所以这里面呢，要讲这个路径啊，要注意。这些字体呢，都得加啊，否则待会呢，找不到找不到啊。好，那同样的找图片也是要回退一层，找到这个images下面的图片啊，所以这个路径呢，我们稍微的要改一下。昨先这你可以从出发先看ione d CS去这里面找，诶看这里面的样式呢，需不需要改路径。好，这样没问题了，再看，再回到index，看这个index里面需不需要感动镜。好，改完之后呢，GH秒都啊CS都没问题了，那就看H秒中需不需要改动静。

好，都改好，我们就可打包看一下了。为了看到具体的输出结果呢，我们有两个指定啊，我们来看一下，我可以在这再写一次啊，我们预指定的有两个。一个叫wipe。一个叫NX server。会啊，有输出啊，会打包。会将打包输出结果。好把结果输出去啊。啊，这个东西呢，它只会在，只会在。内存中编译打包。没有输出。所以为了让看一下我们输出的结果到底对不对呢，我们会通过这指令先验证一下啊，我们先来我们通过CTRLC终止之前运行的结果。在运行pad。快启动。

看一下输出结果啊。好，那么这输出结果呢，会有很多问题啊。好呢，是GS的这个目录呢，也错了啊，其实应该要顶点斜杠回退一层来到这个下面来这个CS下面去找啊。所以这个路径呢，我们忘记改了，这里要改一下啊，我们再运行一次。好呃，然后呢，这里他警告就是我们忘记设置这个模式了，对啊，我们模式呢，得设置成这个development。好，加上模式，我们再运行。啊，这里面呢，没有黄色警告也没有报错啊，我们看输出结果必要的。你会发现他所有的现在都输出在一块了啊，都输出到一块了，没有任何差别啊。那么所以我希望的结果就是，哎，他也应该跟我JS一样，这个目录划分的结构呢是一样的，那该怎么办呢？对吧，那怎么办？我们来一个调，首先看JS，我希望JS输入到JS目录下去，那怎么办呢？

在这里面我们可以加一个配置。这是fair name输出结果是be JS在它前面加一个JS末，诶，它就会输出到JS下面了，我们看效果啊，我们把B删删除掉，重新构建一次。我们看诶这里就多了个JS末这标子里JS呢，就去JS里面了，就这样的。好。那么这个奥呢，它只决定的是这个入口文件的输出啊，这个入口文件是这个JS文件呢，它输出到这里去，是输出到JS下去。对吧，那么这里有个问题就是那么我其他东西怎么改呢。诶，来看啊，比方说我图片要改，在这里就会有个输入叫做pass。它输出到image下面去，就加个images就好了，我们看效果。执行外派。

那么图片诶，你会发现就会去images下面了。好了，那么这些其他资源我也想怎么办呢？诶，也是加个奥pass。就会将它呢输入到比如说media下面。啊，下面其他输出到下面我们再运行。看表达。就media下面就会有其他资源了。所以我把标的全部删掉啊，再来运行一次。诶，标的下面呢，就会划分好这些目录啊，跟前面呢有点类似的目录去展示。那有同学说了，哎，我这之前不是有CSS吗？为什么输出之后又没有CS呢？啊，我们前面说了啊，看这个配置。我们说了啊，最终呢，他都会因为这个CS的原因，把这个样式文件呢，打包到GS中了啊，打包到JS中了，所以样式呢并不会输出，它是跟JS文件是位于一体的，我们会打开GS文件往下走。

样式文件呢，都在这个JS文件中。哎，比方说这个，比方说上面这个X，它现在呢，都在这个减X，所以没有单独包出去。那最终捋一下，你会发现它是这样的。它会以这个entry作为入口。然后所有入口呢，都会输出到这一个文件中。那么其中哎图片资源呢，经过这个图片URL的处理，它会单独输出去。单独输出输入到哪去呢？输入到这个目录下啊，输入到这个目录下，但文件名呢，它内部呢，采用了自己的哈希值。啥意思，就是所有资源呢，都会输出到这个pass下面，对吧，其中入口文件一定会叫这个名字，并且输出出去。所以呢，我们会发现这里会叫只有JS文件变成了BJS，因为只有入口文件会输入到这个名字下。而所有的路径呢，都是这种pass路径。而pass路径呢，是输出到B的，那我想加个images就得加个output pass，它就会在B下面多加一层目录images。

住到这下面去。好，同样的其他资源呢，我再加个加个media，就会输出到media下面。而JS呢，我就是在这加了个JS，它就会输入到JS下面。好，最终呢，我们可以运行一下看效果。是没有问题的啊，还是没有问题的。所以呢，我们可以在最后呢，可以运行那个NPS指令派d server。好，打开浏览器呢，你会发现，诶效果呢，也是没有问题的啊，也是没问题的。所以呢，这以上呢，就是我们的开发环节的一个基本搭建啊，我们的前面的配置呢，跟之前呢是一模一样的。不同的是呢，是因为我们资源越来越多啊，如果不划分目录的话呢，就非常的乱。所以这里面呢，我们简单的划分了几个目录啊，划分几个目录，那么输入划分目录的时候呢，这里面资源路径一定要记得改一下啊，不要不要写错了。

那么输出的结果呢，我也希望跟之前的是一样的，所以呢，我们啊要通过不同的配置，诶，比如说GS文件要去哪里去GS录像。其他资源呢，哎，得加上其他资源要去的目录，这个目录。然后最后呢，因为样式文件是跟JS是一起的，所以不需要再指定什么不能了。那么到这呢，我们就完成了我们的开发环境的所有配置，那么大家呢，哎，待会呢，自己呢，一定要写一写，好好写一写这个开发环境。啊，如果你能够把这个开发环境写完了啊，那么说明前面东西呢，都基本上没啥问题了。好，那么到这呢，我们听一下。