05-尚硅谷-webpack从入门到精通-webpack核心内容分析（上）

好了，同学们，接下来呢，我们要分析的就是这个con factory内部的这个外派配置到底是怎么一回事，好，那么因为外pad呢，将开发环境配置和生产环境配置呢，都整合成了一个配置文件，所以呢，我们通过这一个配置文件呢，就能够一起去分析啊，它开发环境和生产环境分别呢做了什么事情，好了，那咱们来拭目以待，嗯，好，首先来到这个con下面的这个外派S这个文件在这里面呢，我们就能分析咱们最最重要的WiFi配置了。那么可以看到一上来呢，它引入了很多很多插件和其他的模块啊，那同样的道理啊，咱们不要去一上来盯着上面的模块去看，我们要静静的往下走。来看到这里啊，它的判断的process.generate source map这个文件啊，看它是不等于这个false判断这个也就说如果我这个东西呢，就是判断，就是我们最终的要不要生成啊，GS或者CS的一个source map文件啊，如果我们定义呢，这个环境变量，那么它就啊可以不生成，如果没有定义呢，它就会默认的话是会生成的，因为默认值呢，是按de DeFine按de DeFine取认值呢啊就是最终呢，就是false啊false。

啊，如果它不等于false啊，如它一上是I fun肯定是不等于false，所以它的值是true true的话呢，就会要使用map，那如果你定义一个值为false，对吧，False等于false，那么最终呢，这个等式就不成立，就就是就是整体的等式就是false，它才会不用map，好了，那么这个黄金变量如果你真的不想启用怎么办呢？啊，我们可以试试啊，现在我们可假设打包一下啊，我们大概都看一下吧，来我们来到当前的这个终端啊，我们现在打包一下n PM run来咱们的这个BI的啊，那么现在打包呢，因为我们没有设置环境变量啊，设置这个generate source map这个环境变量，所以我们打包出来的文件呢，它应它是要具备这个source map文件的。

我们来看，你看样式呢，有这个map文件，JS呢也有这些map文件啊，对吧，这就是map文件好了，那么就是打包呢，它会生成啊好，那如果我们不想生成怎么办呢？诶得这样做啊，来到page在这里面配置啊，网吧的这里有个库叫做cross。E然后呢，定义这个generate，好，我们要找到这个文件啊。来转form，把它值呢定义成false，注意这里面呢不要加空格啊，就这样写就OK了，那么它呢就会将我这个库呢，就专门用来定义环境变量的，并且呢能够解决不它不同平台的之间的差异，它呢就会定义环境变量，定义一个这样的环境变量添加到process.uv上啊，然后将它的值呢定义成false，所以这时候呢，我们再去打包啊，诶，当然我指定的位置写错的地方啊，我们要放在这个B的环境下才才好用啊，到这里我们再打包的话呢，这时候就会不太一样了啊来看。

N比较大。啊对，这里也要注意，因为我们用了一个新的包cross UV，所以这个包呢需要下载一下。然后呢，我们用样下载东西呢，要统一都用样下，千万不要再用NPM，用NPM呢，会把之前的包子给删掉啊，所以要注意。好，那么我们去下下包啊，用下完包之后呢，我们就演示到OK。好，这个时候呢，我们来看它打包后的结果啊，那么mypa呢，咱们RA中的这个脚手架呢，他每次打包之前都会把之前的文件给干掉啊，所以我们再去检查的时候肯定是没有的，诶那咱们看，所以他就没有生成这个s map文件啊，所以回到这里啊，这里面呢，这个变量呢，就是来决定啊，它到底要不要生成S文件的。

对吧，那么改的话呢，就是通过crossv去修改啊，这个库去修改好了，那么后面的呢，类似的咱们就不一个解释了，那么下面这个呢，也是就判断我们的run timenk tracknk那个文件啊，Run timenk文件是否要内列到JS中啊，就是以那种内列JS的方式呢，插入这个软time文件，而不是生成单独的JS文件，好还记得吗？软time文件呢，其实在之前的章节呢，我们在学习那个PE的时候，其实讲过，我们在进行缓存的时候呢，如果使用可能在harsh进行强制缓进行进行缓存的时候呢，那么我们发现啊会是啊文件之间呢啊，比如说A文件引入B文件啊，A文件引入B文件之后呢，A文件它会保存B文件的一个哈希值，对吧，它的一个那个横哈值，那么导致B文件一旦发生变化的A文件也会缓存失效，所以呢，会生成一个time文件，然后文件的默认情况下它会打包。

组成单独的文件，如果你加上这个房间变量，它就会不打包啊，就会被内敛进去，所以到底要被内敛的就看你自己了，看你自己。对吧，那么这里是否是内里这个软件啊。好，下面呢，就判断啊，是否继承这段yes in和啊，但是呢，实际上这个变量呢，我们能看到它并没有生效啊，并没有被使用到，所以这个呢，可能是它忘记删了，好接下来它这里它定义这个变量就是我们的图片内联，就是内里图片的一个限质大小，默认值呢，它是这个1万啊1万BY啊，也就是说近似看作是10KB啊，那么也可以理解为是最小转化成BASE64图片的大小。那默认值呢，就是10KB左右啊好，下面呢，就判断当前那是否有这个ts con这个文件啊，如果有的话呢，那说说明我是要用t type啊。

好啊，接下来呢，它就定义了一些正则啊，定义这个判断s.S文件的正则和点mo.s文件的正则和S和modu s这个政策啊好，那么这政策看到呢，这里面的modu相关的东西呢，将来就跟我们的一个s module相关的啊，这是定义的一些样式文件的政策。后面就能看到了啊，那么这里也恰恰说明咱们的这个RA这样的默认是支持SS这种啊这种CSBA器的好，接下来呢，就可能看到了，它向外暴露出去一个函数啊，刚刚呢，前面呢，我们在开发环境下呢，我们第二个函数传了一个参数，那么这个函数呢，其实就是这个函数了。好，这个呢，就是我们整体，它会生成开发环境和生产环境的一个配置函数。

生成啊最终外派开发或啊生产环境的配置的函数。它能接受一个环境作为一个参数啊，那么如果你的值是development，那么我以DV以值就为啊，如果你传的值是生产环节，那么我这个值就是，所以它定义了两个标识，方便后面进行判断啊，好，有一些呢，我们就不多看了啊，OK，那么它这里调了一个get client啊，Environment获取环境变量的方法，这个方法呢，前面我们分析一过啊，它获取环金变量的方法。它默认呢，肯定是有我们的那个啊pro那个note UV啊是当于的，但是呢，除了除此之外呢，它可以加载额外的加载点UV文件下面的啊这个环境变量。

但是有个条件啊，有个条件就是必须是以APP开头。OK，然后接下来它定义那个函数啊，这个方法呢，我们后面会仔细的去看啊，现在先放在这里啊，这个方法呢，是来获取样式，处理样式文件load的一个配置。好，接下来能看到下面下面的返回对象，这个对象呢，就是外派配置对象对吧。所以WiFi的核心配置呢，都在这个对象中，所以我们研究的就是这个对象了，首先呢，它判断当前的环境啊，如果你是production就是production，如果你是以development就是development设置我们的开发环境，然后呢，这里有BI啊，这个is in production，那么也说只有是生产环境呢，它的值数为true，开发环境为false，什么意思呢？其实这里写的很清楚啊，就是呢，它呢正常情况下呢，它即使报错啊，它呢也可能打包不会终止，它会继续打包，但是呢，我们生产环境下呢，如果已经报错了去打包的话呢，打包输出的文件呢，其实没有意义的，而开发环境呢，并不需要立马报，立马报错的话呢，不需要停止，因为我可能通过修改代码的时候呢，它能能能让它呢能够继续运行，所以开发环境下呢，我不要立即去终止，而生产环境下呢，如果出现错误，我就没必要再输出了，所以呢，他这里放了个值啊，如果它的值为错，也就是生产环境下，那么他就会及时终止出错的一些代码，不再打，不再打包输出了。

那么这样就比较好，而开发环境下呢，啊，把我代码可能写错了，他报错了，但是呢，他不会去终止咱们的编译，所以呢，稍微的更好一点啊，所以呢，它会提前种植编译好。下面的这个DB tool呢，其实就是我们的开发调试工具，这里能看得很清楚啊，如果我是生产环境下，并且呢，我要用这个source map，那么我的值就source map，反之，如果说我是开发环境，那我的值呢，就是trip module source map。

Trip model map，所以呢，也就意味着map用于生产环境，Trip model map开发环境。对吧，这一点呢，其实和RA和will呢，其实还是蛮像的。OK，接下来来他提到个N入口啊，N入口呢是个数组，数组呢最终它输出的结果呢，还是只有一个啊，如AN数组呢和对和字符串呢，其实很类似，输出结果是只有一个，但是呢，H作为数组的话呢，可以引入，同时引入多个文件对吧，但是打包呢，输出成一个我们的一个扳OK，如果是开发环境下呢，它会引入这个耗DB，说白了就是我们那个啊啊热线载对吧，热加载，所以呢，开发环境下它会引入这个都一个模块啊，生产环境下的部分引入，那么不管你是开发环境，生产环境都会引入以app.js对吧，也就是我们的那个SC下面的index JS作为入口开始打包。

那么filter filter玻呢，就是过滤为空的数据啊，比如生产环境下它是为false false的话呢，那么我最终得值是false filter玻呢，就会把这个false值给过滤掉，而我们数组中的最终只会留下这个APP indexs这个文件路径。好了，这是入口啊。好，接下来输出的话呢，就指定我们输出的pass路径啊，生产环境下呢，就输出到build目录啊，如果开发环境下呢，就不输出了输出的路径，那么下面呢是输出的提示啊，就是在每一个这个输入结输入结果上面加一些文件名作为注释啊，用这种注释的方式呢，加个文件名作为注释。

对吧，就是添加啊，说白了就添加一些注释，添加这样的注释。到输出的文件中。好，下面呢就输出文件名诶使用的横harsh对吧，这个呢就是我们来加强缓存的一种方式啊，对吧，输出文件名，好下面呢，这个呢它是为触啊，这个为触呢，其实就是使用未来版本的一些emit emit emit方式啊，那么在WIFI5的时候呢，这个呢是默认值，所以WIFI5呢将会被移除掉，所以我们现在呢不用太关心它。啊，接下来创file name呢？诶来看啊，它跟file name的区别就在于file name的决定的是我们的入口文件啊和入口的其其他文件，它输出的结果这个文件的命名，而窗name呢，是我们在这基础上呢进行代码分割Co代码分割分割出来的文件呢，它会以这个串口file name的方式去命名，所以呢，我们会知道入口文件最中输出的名字呢，是name加上一个哈希值加JS，而如果从入口文件中去代码分割，分割出来的其他的文件呢，它会叫啊name a哈其值加上串DS，所以最终我们可以通过输入结果呢，就知道谁对应的是我们入口文件，而谁又对应的是我们这种经过代码分割之后的分割后的文件。

好的，Public pass，那就等于我们pass中的生成public pass啊，默认值是斜杠，如果你要修改的话，再通过home page配置page中的homeage修改啊。好。现在定义我们的开发环境的那个开发DB to Mo的这个文件名啊，我们呢，我们开启了，假如我们开启了文件，对吧？LA文件，它会对应上它相应的一个文件，但这文件路径呢，很有可有可能会因为某种原因产生出错啊，产生出错，所以呢，这个方法呢，这里面方法呢，它其实就是把这个文建名呢，变成一个唯一的值啊，尽量让它不会冲突啊，这样就可以了。

好还又可以啊，可以呢，这是我们打包之后呢，所有资源呢，会通过外派和JNB去引入啊，那么如果我们将来是个多模块应用，那可能这两个变量呢会冲突导致出问题啊，所以呢，它给每一个外派address后面加了一个name，那么这样呢，每个函数名就不一样，这样就不会出现产生冲突。好，下面呢，它定义了个全局，代表什this意思啊，之所以不定义成window的话呢，就是如果你是在别的浏览器可能没有这个window，比如你在弄je，没有window，这global对吧，那么这时候用window就出错了啊，那反之你用global的话呢，在浏览器也不认识它只有window，所以也不行，那不管你是window还是global，我通过this代表的一定是你们相应的某一个对象，所以它的改成用this，这样呢，可能兼容性啊会更加好一点，处理各种方式呢，也更加方便一些。

好了，那么这些呢，就是我们的一些outfor输出的一些配置啊，对吧，那么接下来呢，我们再看啊，它有一个配置呢，叫organizationimization opization呢，在这必要是咱们的一个优化对吧，优化压缩的一种方式啊，那么它首先呢，问你，诶我当前的要不要启动压缩，什么时候启动呢？生产环境启动压缩对吧？所以呢，只有生产环境会启用啊。好，压缩呢，这里呢用了两个插件，在过去呢，我们压缩JSS呢，用的是alify JS啊，但那个插件呢，已经不断维护了，取而代之的是叫做T去压缩GS，那么里面呢，传的是压缩GS的一些配置啊，那每一个配置呢，到这里其实有一些相应的注释啊，我们就不过多研究这里面的配置啊，那么在刚开始学习的大家也要特别注意啊，一上来呢，我们不要去刨根治底，去研究特别特别多的细节，这样的话呢，你的时间永远是不够的，我们先把大体方向先抓握好，然后呢再去研究细节，这样呢可能会对你来讲会更加舒服一些。

好了，那接下来呢，他就去压缩CS啊，咱们这主要有这两个资源需要去压缩HL和CS，压CS呢，这里也是判断它是否是压缩mab，如果要的话呢，我就给了你，不要的话呢，我就不生产啊，就不生产。