18-尚硅谷-webpack从入门到精通-生产环境基本配置

今天呢，我们学习了这么多的一些各种处理啊，对样式文件处理，对JS文件处理，对HL文件处理啊，那么接下来呢，我们就得汇总在一起啊，生成一个我们想要的这个生产环境的基本配置。好了，那么下面呢，我们就大家大家一起去开发一个生产环境的pad配置。打开Vs code啊，我们来新建一个16。好，叫做生产环境配置。好，我们来开始写代码。好了，那么大家呢，要在写的过程中呢，一定要多思考一下这个配置到底是为什么要这样写啊好了，那我们来开始一点点做。首先呢派呢向外暴露出去一个对象啊，使用common语法向外暴露出去。好，这里面呢，一共有五个核心配置，所以我们一定要配置好，第一个叫entry。我们的入口文件，那么我们一般来讲就是S下面的JS，当然呢，我们多了一个目录JS。

好，那么第二个配置呢，叫做output。对吧，他指的是个对象，其中有个file name name代表我的文件名，哎，我们输出到呢，是JS下面的JS。OK啊，那么第二参数呢，叫做pass。输出的文件目录，那么这里面呢，我们会有个绝对路径，通过方法去拼接绕。那么输出的木呢，叫标的。那么这个是so方法呢，我们得引入进来。它来自于核心模块pass。好，那么接下来呢，我们还需要写剩下内容。啊，第三个配置叫做module啊，也是我们的load的配置，里面写职位数组。好，第四个呢是plugins。好是我也是的，数组里面写差距的配置。

最后呢是模式，诶咱们呢就调为生产模式，因为咱们是生产环境。好，那么到这呢，我们写了五个核心配置，那么下面我们呢，从分别从啊CS文件啊JS文件到图片文件到H文件，我们一个一个去处理他们啊去处理他们。首先，CS文件我们来写规则。好要首先CS文件呢，又分为啊，我们说了有CS文件，有我们那些比方说文件，可能将来还有SS文件。我们呢，就以CS文件和less文件处理为规则来去看怎么做呢？首先检测，比方说文件写个正则表达式啊。CS。结尾啊，属于文件好使用规则啊，那么最开始我们出去的时候呢，是使用的是。加上这个出题的。那么后面我发现呢，这样做的话呢，会将我们的CS代码整合到JS中，这样不好。

所以我们用了一个插件来去提取这样的文件。那么我们把插件先引入进来。好注意看啊，先写这个我们所插件的这个名称，这个哪里。然后呢，再去把它首字母改成大写，改成个大头法就OK了。好，这里不要写错了啊。好，它用法呢非常简单，在插件这里面呢，请用调用一次。然后呢，为了让它命名的输输出的路径呢，诶，比如说JS在JS下，CS在S下，所以要重命名它的这个名字。输出到C的这个CS。这样呢，我们的这个路径呢，就不会错了。所以这里呢，要改一下路径啊。好，同时呢，我们要将style loader取代，我们不要设定style标签了，使用这个mini这个插件的load就OK了。那么到这儿我们就配置完成了，我们这个CS的一个啊，基本处理它呢，能够处理C文件，同时呢，能够提成单独文件。

好了解处理好之后呢，我们再来处理，诶第二个叫做less。Let同样的一样处理，只不过呢，它需要再加一个东西，叫less。那么到这呢，我们也完成了这个提取C单独文件，对这个CS和less都做了处理。那么下一步呢，我们要对样式啊做兼容性处理。而建议数据处理呢，得使用post，诶，我们来写啊。我们说了啊，如果你只要使用no的默认配置，那么就直接写一个字符串啊，它会自动加载。如果你要修改配置，那么就可以写成一个对象的方式。这里面通过options来去修改它的默认配置。那么post呢，他做C兼容性处理呢，你要告诉他要做哪些。

所以呢，我们先写了默认配置是。那么我们就要引入要用的一个插件啊，这个posts。然后再调一次啊。那么到这呢，它就会使用这个插件里面的配置呢，去对啊，咱们的C做一些兼容性处理。但是呢，这里还差一个问题啊，所以大家注意我在这写清楚啊。还需要啊，在中只是我们这个，哎，容系处理呢，做到了什么方面啊，做到了哪些浏览器。也就是说第义这个S啊。所以要记得定义。那么这定义呢，我们就不再写了，我们就大家看一下啊。它可以分为。分别对应的开发环境的配置和生产环境配置。

开发环境只要满足基本需求，所以呢，只要最近浏览器的版本就OK了。那么生产环境呢？为了兼容大部分浏览器，所以呢，需要写些较详细较完善的配置。好，我们说了啊，默认情况下呢，This呢，它默认情况下是用的是生产环境配置。如果你要使用开发环境配置，你得在这里定义一个东西啊。叫做process啊，因为。At processing。也因为。点漏的英语啊。等于啊，这样才行啊。当然呢，你其实也可以把它调为production啊。就这样呢，它也是会使用生产环境配置。好，通过这样去，诶，这个这个定义环境变量，定义的环境变量。这环境变量作用呢，就是帮我们去做一些事情啊。

就是来决定。使用。哪个环境啊，哪个环境。好，这样呢，当然也是使用生产环境啊。那么这个CS兼容器处理啊，除了这个CS文件要做，我们的less文件也得做，那less文件怎么做呢？然后呢，把这配置再复制一份啊注意咱们的兼容器处理呢，只能针对JS这种文件做，那less文件的本身做不了的，那怎么办呢？诶加在中间啊，这里要特别注意要加在中间。我们前面讲过啊，Use数组呢，它它的执行顺序呢，是从下往上的。比如说他先执行。当执行less log的时候呢，它会将less文件编译成CS文件，那么此时呢，就已经是CS文件了，那么经过post c的处理呢，它就会对CS文件呢做兼容性处理。

然后再通过呢把S呢加载到GS中。再通过这个这个呢，把它提取成单文件，所以是这样的过程。所以呢，它必须放在这个load less的下面，并且是load下面啊，千万不要放在less load的下面，这样呢，当你解析的时候，发现文件是less文件，它解析不了，从而会报错的。所以大家特别注意啊。好了，那么这时候我们就会发现啊，你看下面呢，也使用了这三个load，下面也用了，所以啊，这里面我们就可以复用一下啊。我们在外面呢，为了服用啊，服用了的。我们可以定义一个叫做对吧，Common这个。就处理CS文件的吗？好，每一个书读，书读里面发一下这些内容。好，下面呢，利用上三点运算符A不就把它展开了吗？来看啊。

为什么？那么这样呢，我就不用去写太多的重复代码。所以呢，我们这些代码的复用啊，哎，在我们的PA中呢，其实也可以用上去，这样呢，能让我们代码呢更加小，更加精简一些啊。好，那么到这呢，我们处理好了第二个啊，就是CS的兼容性处理。那么最后呢？我们还需要对CS进行压缩。好，继续压缩呢，得用一个插件啊。这插件呢，叫OPT啊，这个插件单词是最长的啊，非常长，Optimize CS CS这个插件。好，我们来复制啊。好时采用大同的秘法。好，这插件呢，用法呢非常简单啊，只需要6.5就OK了啊，所以呢，不需要太麻烦。在这呢，我们就压缩了CS啊，压缩CS。

那么接下来呢，我们就要处理其他资源，我们要处理减S。所以JS资源呢，首先要做的是是JS的语法检查，也就是。好，Us语法检查的话呢，我们来看啊，Test要检测的文件是。好，同时呢，语法检查呢，我们一定要注意，我们只要检测的是自己的文件，千万不要检测别人的东西。这里面内容呢，千万不要检测。好了，那么这时候呢，就可使用我们的loader叫做yes loader去做干活了，啊好了。好，只要yes it load啊，我们说它呢，也是需要加上一个配置的啊，需要注意啊，在page。加这个。来指示我们这个呢，做哪些啊检查。

那么我们为了为了这个警察呢，更加友好，更加好，说白了就是我们让这个警察呢更加专业，我们用的是这个规则啊，有的是L这规则。咱们一个非常有名的规则啊。那么LB规则呢，我们需要下载一个LB con这个base这个东西插件啊去做，那么同时呢，在这里面要写上配置，同样的我们可以来看一下啊。Yes it继承的这个LB这个库就OK了。那么这样的配置呢，配置好了，它就会使用LB这个功能呢，去做一些检查啊做些检查。就是这个。那么检查过程中呢，会出现报错，报错的话呢，诶，我们可以通过一个选项option。叫fix true啊，来自动修复我们出现的问题。所以到这我们就完成了我们这个ES对JS的一些一些基本问题呀，一些代码的规范的检查就完成了。

好，那么下面呢，我们就得开始，接下来一个我们要对JS呢做兼容性处理。那么接梳理呢，我们把前面几个复制一份，因为前面写法都差不多啊，也是检测JS文件，也是要排除not modules，不同的是呢，我要使用的是。来对JS的做兼容性处理。好，兼容处理的话呢，还需要加个options在这里面呢，写具体规则啊。前面呢，我们说过三个步骤啊，就是一开始呢，我们使用的是，诶在这里呢，写个pre啊预设告诉派咱们B呢使用什么方式去做接容器处理，那么第一个就是BS感V。啊，使用最基本的一个环境呢，去做兼容器处理。那么后面发现呢，我们发现啊，它只能做一些简单的语法的兼容性啊，比方说系统函数Co。三点运算符等等啊，但是一旦遇到一些promise，什么object value case这些方法呢，那就做不了了。

所以呢，我们用了第二种升级方案，用了这个库。但是这个库啊，问题就是啊，它会把所有金融性全引进来，但是有可能我只要用其中的一部分，所以呢，体积太大了。所以最终啊，我们是这样写的。又变成了数组啊，这里面呢，再写个对象。通过use built in。实现按需加载UC。那么按期加载你使用谁呢？使用cos进行按需加载，那么版本呢？是我们最新的版本三。好，然后呢，按时下载啊，你要兼容哪些版本浏览器，通过他可以去指定。啊，那么这样呢，我就简单的写两个啊，就不全部写了，比如说截止到60和60以上，截止到five four。啊，比如说五十五十以上等，后面不再写了。那么这是指示我们这个东西呢，做到什么方面浏览器啊。

好，那么到这呢，这就是我们的一个性处理的一种方案。那么在这里就有个小问题啊，所以大家一定要切记。通常来讲，正常来讲啊，正常来讲。啊，一个文件只能被。一个楼的处理。是。你会发现我们有个。当一个文件。多个处理。那么。啊，我们一定要搞清楚这个的执行顺序。换句话说就是我到底是先执行yes it呢，还是该执行先执行这个。他不可能是可以混着执行的，那这样就有问题。那现在是什么呢？

我们要先执行这个。啊，再执行。这白。为什么？我们来说一下。就是因为啊，咱们的这个呢。阿拉是做语法检查的。一旦我们检查出现语法错误，那你后面是再做的话呢，就没有意义了，所以这是一点我们需要进先进行检查。好，第二点就是呢，会将我们的EL语法转成语语法。一旦经过blo转换之后呢，再去再去对yes it检查，它又会报语法错误，哎，说你的这些东西呢，不能用啊，不好用。所以啊，这个原因呢，我们也只能先进行再进行。诶，那这该怎么做呢？哎，说呢，还有一个属性加个enforce。We pray啊。这个为的意思呢，就是啊，优先执行的意思。

就默认情况下呢，我们这个，哎。我们这个序相当同级同同。而他呢，一定要等这个干完活了才能接着执行。所以加上这个属性呢，它一定先执行的是yes，再执行的是。这样呢，这两个就不会产生冲突了。那么到这呢，我们做好了这个语法检查以及金融系处理。好，JS压缩怎么办呢？诶，前面我们说过啊，只要将mode调为production，我们JS就自动压缩了。好，那么到这呢，我们处理好了这个JS，我们说一下啊。接下来呢，我们还要处理图片啊，处理图片。图片的话呢，通过T去检测啊，检测图片类型分别为啊，比如说我们的JPG。

啊，或者是这个。或者是GF图片啊。那么使用的规则呢，就是我们的。二。那么为了让它这个性能更好啊，为了优化一下，我们还有个option。啊，通过limit来对一些小于8KB以下的图片呢，进行六四处理。同时为了让名字呢更短一点，通过name来指定它的名字啊，哈希值呢只取十位。同时呢，我们给它加上自己的这个文件扩展名ST。好，最后呢，就是输出的路径啊，我们不要太不要输出到我们的那个标下面加一层叫images。加加images输出路径呢，也指定好了。好，到这呢，我们的图片就处理好了。

那么下面呢，我还有啊HL资源，要处理HL资源，HL资源的话呢，得使用一个插件叫H。好，我们来把它引入啊，引入。已入插件。好引入之后呢，待会我们就可以用了啊，它呢也是直接new调用就可以使用这插件。然后呢，要在这里传一个啊，以指定H文件为建新H文件啊。好，那么这里呢，就处理好了这个HL文件。那么在处理H文件之后啊，我们会发现新的问题，就是HM中的图片呢，它处理不了。所以这里面呢，我们还得加一些东西。

好使用的呢，是我们所谓的H。它就是专门用来处理HL文件中的图片问题。一旦加上这个，我们一定要注意啊，它使用的模糊呢是common，好UR呢使用的是，所以这里还要关掉，这个叫做Mo。First关掉它，那么这个解析呢，才会是成功的啊。是否成功？好，那么这是这样呢，我们也处理好了这个HL中的图片问题。最后呢，H要压缩啊，需要加个属性叫迷你。我一个对象，哎，有collapse。为啊，压缩咱们的这个空格，Remove去除咱们的注释，那么这里呢，就能对H进行压缩了。那么在这呢，我们又处理好了这个H的内容。

那么最后最后呢，我们还要处理其他文件啊。其他文件呢，我们通过排除法啊，排除一些，我们不要其他的文件，那其他文件呢，都由他统一处理。那排除谁呢？排除的就是我们来一一写啊。排除，比方说我们的JS文件，我们的或者less文件。我们的HL文件，我们的各个图片文件JPG啊，PGGF。对吧，等这文件，那么把这些文件一排除，那剩下文件呢，都是由我这个log处理。那么所谓的load呢，叫做file啊，它会原封不动的输出文件。那么为了让它输出的结果呢统一在一起，我们将一个options里面指定output pass。让他输出的目录呢，都到media下面去。没电。好了。那么到这呢，我们就已经完成了整体的这个生产环境搭建啊。

环境搭线，最后呢，我们来大家看一下。我们对JS文件做的处理啊，首先呢，我们使用的这个和style。但是呢，为了提取这单独文件，我们用那个mini这个插件去做啊。然后呢，后面又做CS兼容器处理，通过去做的。那么这里面呢，还要记得在page中定义这个意思，来指定我们CS兼容性做到哪个哪个层。然后呢，后面呢，又做了这个啊，JS处理JS的一个语法检查。好，这里面呢也是啊，需要呢，在pages中定义yes it来指定我们这个yes it的规则是什么？然后呢，做了JS的金融系术体通过来去做啊，又分为三种做法啊，第一种是基本做法，通过。来做。好，它只能做一些基本的兼容，第二种呢，是加上at b啊。

它能做好全部的GS接，问题是太大了。第三种二下载通过S加上以上这些配置就实现了。好，一旦你写了B配置啊，那么就会跟之前的颜层产生一些冲突。就Y1如果先执行再执行就会报错啊，就会报错，所以我们需要加一个false为true为啊，让这个it load的优先执行，这样呢就不会出现这样的问题了。最后呢，要压缩咱们的JS呢，只要调为mode为production就可压缩了。对图片的处理的话呢，只需要使用URL的就可以做图片处理。HL处理的话呢，哎，通过HL进行处理。好，然后呢，我们HL中的图片问题还得引。那么这里还是要注意啊，就一旦使用这个一个。

好，除理图片的逻辑呢，其他的逻辑啊，这H文件的压缩呢，通过miniify这个属性呢，就会压缩。那么最后呢，再通过这个呢，来处理其他文件。那么到这呢，我们就完成了整个这个生产环境的作业配置，它呢就跟我们前面的东西呢，一一对应上了。好了，那同学们大家呢，可以先待会呢，可以自己试一试这种配置。啊，如果你能够把这个配置呢完整写下来，那么说明前面东西呢，就基本上都掌握好了，啊，基本上都掌握好了。那么我们呢，就讲到这。