Web前端框架通用技术 webpack5 4_webpack的核心概念 学习猿地原创

大家好，我是学习园地的特约讲师高洛峰。下节课呢，咱们学习了web pack的安装和初体验，那这节课呢，咱们来了解一下webpa的五个核心概念。外派工作如何打包的，怎么打包的，对吧？那如何生成打包后的文件的？那都是通过这五个概念相互配置，相互配合来完成的。那我们来体验一下，咱们一个一个来说，比如说咱们在前面在打包的时候，对吧，那我跟大家说过了，如果我直接使用命令行。这种打包你看我可以简单的指定开发模式还是生产模式，这是没问题的，对吧？那如果我想指定对吧，入口文件如果不叫in带JS是别的名称，或者打包后的目录，不想用这个目录打包的文件也不想用这个文件，那怎么办呢？那我们都可以去改变对吧？通过密码行都可以，比如说我现在换一下我把这个目录，因为这个目录是打包生成的，对吧，你可以随时删除对吧？我们原文件原程序存在就行，那它会从重新打包的时候会重新生成。

你比如说。嗯，我们把模式还换成比如说开发模式，我们先一个一个试一下，比如说因为现在是开发阶段嘛，所以呢，我们就试着开发的模式，那我们可以指定我们的什么入口文件，在当前目录下web派对吧，因为我在web派五这个项目目录下看到了吗？项目录下，那当前目录下src里边，假如说这个不叫in.JS，你入口音线叫别的名，你可以直接指定这个名。杠O意思是什么？Output输出什么名称？那输出到哪个目录呢？那默认是仓库的DST的目录对不对？那我们比如说咱们叫编译后的程序，那叫build，叫build，我只能这个目录那。那打包的那个搬走叫什么名呢？那我们也叫做B，呃，Ild吧，点JS，我们叫这个名称，默认是DST下边min.JS对不对，你想叫到哪，打包到哪，目录下想指定什么名称，叫什么名称想指定，因为模式只有两种嘛，对不对？来我们试一下。

好完成对吧，那我们看一下生成的这个目录，你看是不是叫build对吧，里边是这个文件。对吧。的这块。它指定了一个，指定了一个目录啊，别管了，对吧，外目录你看打包到这里对不对，看到了吗。这是这样的一个结构，但是你想象一下。如果我通过命令行指定，那么我每改一次代码，是不是我都需要写这么一长串的参数啊？对吧，我想要最简单的直接外派行不行啊，对吧？模式入口文件出口文件都不指定了，这还只是指定了简单的两个命令对吧？简两单简单的几个参数而已，那如果有更多呢？另外它这里边还不全对吧，不是说想干什么就干什么，所以说学外派配置，并不是说在命令行参数这块，你去一个一个配置，它有这样的功能，但是不全部在这块，如果全部在这，你每改变一个代码重新打包，你就得输入这么一长串的东西，那虽然我们可以把它加到哪去呢？加到passenger JS里边的这个里边。

对吧，还可还可写到这里边，比如说我们加一个。DV开发模式，然后把刚才的命令粘到这来，虽然可以，但是呢也比较麻烦，对不对，所以我们怎么办呢？我们这些咱们现在都不用管它有一个什么，有一个配置文件。那这个我先叫别管那命令了，我也不调了，因为用的不多，那真正用的是什么呢。是，我们会在这个木下。也就是在我们的整个的一个项目上。我们新建一个什么呢。新给外派做一个什么，做一个配置文件，这个配置文件呢，也是JS。也是JS文件，所以呢，我们就新建一个JS文件，那名称呢，叫做web什么派。点coniggu.DS那么说这个名称我能不能随意命名呢？

能不能随意命名吗？可以，叫什么名都行，但是呢，如果你不叫这个名称，因为这是它默认的配置文件的名称，如果你叫别的名称，那么默认在这块也得指定配置文件的，每次都得指定配置文件是什么才可以。如果我们叫默认的名称，你就不用指定就可以了。不用指定就可以了，所以呢，这就配置文件和参数一样，参数这里边。你写的它不会说一个持久的保存，写在配置文件里的配置会持久保存，每次都按这里边去运行程序，所以呢，这个配置文件的作用就是就是只是web pack干哪些活。所以你运行外派指令的时候呢，你不加任何参数的时候，都会到这里边儿去找这些指令，然后呢，按照这个指令去运行，去干活，去加载各种配置。来构建我们的一个项目。是这样的一个过程。那这个里边采用的语法什么语法呢？这里边采用的语法就是什么？Com GS，因为它JS文件嘛，我们只要暴露出一些模块就行了，所以呢，既然使用模块，我给你简单指定一下，比如说。

指令，呃，Mo model.ex这个我们用com j X去暴露，把所有暴露的咱们都说放在这里边，这是一个阶层文件，我们可以敲开对不对，那S文件里边呢，那接是怎么写啊，无非是键和值对不对，然后逗号，咱什么键和值这样的一个模式嘛，对吧？对，前面呢，你比如说咱们在这里边，咱们用的方式不都是这样的格式嘛，对不对，所以这个文件里边写的格式也是这样的，这是阶层格式对吧？会写阶层，阶森当然是JSG的语法里边去学的，对不对，那咱说没有这个配置文件的时候。我们都我们都可以直接运行，比如说指定模式什么的，对不对，那有这文件了，这文件里面虽然可以配置很多选项，所有的都是可选的，你不用全写，比如说我现在只写一个简单的mod，只写模式对吧，这是键，那值呢，你比如说我指定单引号双引号都行啊，比如说我指定呃，生产模式p Du，呃，P production Du t生产模式。

对吧，只指定一个，那我现在在指在这执行的时候，我直接外派就可以了，我不用指定模式，你看在这块。还是默认的这个目录，你看是不是生产模式给我们压缩过的。对吧，就可以了，那如果我这块模式我改变一下，你看它也是按它来的，我比如说。他支持两种模式，对不对。这块加什么两种模式，一种是什么？呃，生产模式，生产模式。模式生产模式就是P，对还有一个什么开发模式是呃D这个对吧，那比如说我现在给他改一下。De，呃，Devt保存一下，你看我改一下模式，然后呢，我再编一下。你要直接外派就可以了，所以呢，这里边儿怎么呢。你看。出来了，点开它直接就是这个空间内容对吧。

盖注释的这种就是生产环境就可以了。所以在这里边我们写这些东西，那这里边能写什么，那这里边能写的就是我们这里边的这么多内容。看到了五个最基本的核心概念，我把它都拿到这来。咱们拿到这来，当然了，这里边儿我得一个一个的给他注释上。注释上我一个一个注释啊，因为我要一个一个在这里边去写东西，然后。别乱啊，空格一下。当然了，你平时在配置这个的时候，你不用写什么，你不用写这些注释啊，我只是在咱们现在是第一次接触这个，在讲课的时候咱们用一下。

在这里边。咱们一个一个去看一下。首先来看一下这个。叫安叫什么入口文件，那入口文件怎么写呢？什么是入口文件呢？七把我确保全注释了吗？不然的话会有问题啊，全注释了，然后咱们一个一个看一下你看啊。Al，如果我在这里边写这个键，那也就是在这块写上entry冒号，这是键对不对？那后后边我可以写值，那值什么呢？你比如说在这块入口文件，也就是我们通过哪个文件开始打包，我们通过SR下边in带点S对不对？如果叫别的名称，你这块就需要写了，对不对？如果默认就是src下就应代表JS，你这个可以不用写呀，对不对？那在这里边，比如说当前目录下src下边的。因为基于这个目录下边的SR下边啊，基于配置文件下边就index.js，那我还叫这个名对吧。还叫这名，如果你改其成其他名，你就叫其他的名，对不对，然后这比方写逗号，因为阶层格式嘛，每个之间用逗号隔开的，下边它还有一个呢，对不对，如果单独一个的话，你不用写这个逗号。

他入口件只是外边派的，以哪个文件作为入口起点开始打包分析，构建内部的一个依赖图，对吧，从这个文件开始是这意思，当然默认可以不写，不写的话你就得SR，你带着JS文件是这样的，那第二个。第七下output。那第二个。处置。家伙看起来好一点。Output什么呢？是输出，也就指打完包后的资源，也就Windows这个输出的哪里，以及如何命名使用的这个，那我们这块名字也叫out，不也是可选的，不一定写啊，默认咱们说在哪啊。默认。默认输出在。你看啊，输出在这个里边就这个名对吧，但是呢，我这里边需要配置多个选项。配置多个选项，所以呢，它后边你看啊。

冒号后边的格式就不是一个简单的一个字符串，如果多个选项，因为它值也是一个阶森，逗号值也是阶森，你可以写在一行，也可以敲开，对吧？你比如说让它的命名在哪呢？File name指定它的文件名叫什么，那比如说我们叫做b.JS，我们叫这名，不用再默认叫这个了。对吧，我们给它换个名，这里边也是阶层多少键和值对不对，那输出到哪个目录呢。那如果指定路径的话，我叫做pass，通过它指定，但是通过它指定的话，他得找项目的跟目录给我们打包，对不对，所以呢，我们这里边指定目录的时候。我们最好用NOEGS里边的一个包，所以呢，你得把这包引进来啊，旅客包含谁呢？包含就是note GS，因为咱们现在NPM是基于note GS的对比对外拍给大家，这也是什么基于呃note GS的，所以在这里边你看啊，我加上一个呃，找到这个note GS里边专门处理路径的。

一个方法pass，用pass里边的什么样的什么方法呢？什么模块呢？Cos接收一个叫做什么啊，叫做这么接收，把它直接生成一个，生成一个方法，一个函数，直接用使用这里边的这个函数。通过pass里边，这是notes的语法啊，Notes里边了，把这个函数拿出来。咱们叫方法，这个方法拿出来，然后通过这个方法我们就能找到我们项目的当前目录，找到我们项目当前目录调用这个方法，人弄在sjs里的这个方法方法啊，因为我们这个你看一下。在我们杰森里边，键值是可以调用方法的，调用的只不过是not j方法，Not j的方法有一个什么呢？有一个类似于常量叫做这个。DR name目录名代表的是当前什么？这个项目的根目录名，根目录在这个根目录下，我们创建一个你想叫什么名，默认不叫DST嘛，对不对，那默认我把它叫做build，编译后的目录就这个，那后边没有值，我可以不加逗号就行了，你看输出的文件名是这个，输出后的目录是这个。

对吧，那这个D目录就会变来，我们保存一下，你看我把这个再删掉。再删掉，然后。去调一下，我直接外派，你看我一个杠O的参数，什么东西我都没指定对不对，直接外派他就会找什么，会找他作为入口文件输出到output指定的打包后的资源的位置，然后呢，模式按照下边我写的这种模式，这样的话我们参数就一个都不用写了，对吧，来我们。回撤一下。好，没有出现任何错误，成功用了1134毫秒对不对，2.5T对吧，然后在这下边你看有个什么，有个build是不是我们指定步骤build下边build加S的模式是开发模式的，这样的一个结果就可以了。看到了吧，这就是这两个概念很好理解吧，当然了，里边的详细配置不光是一个字符串，它可以是数组，可以是对象啊对不对，那输出的位置呢，这个咱们都可以在指定，咱们先不用管，那咱们再往下看。

第三个。唠叨。这个呢，是干嘛的呢，干嘛的。拿过来看。Load是让webpad能处理那些非加va号的资源，比如说它相当于一个翻译器，你比如说CSS资源，图片资源。Less资源，Fast资源等等，对吧，这些资源呢，因为咱说了默认外派只能处理谁啊，是处理javascript，比如说杰森点后缀是点杰森的，后缀是点JS的，这些是没问题，当然你要翻译成把CSS打包到我们这里边去，把HTM打包HTM不用啊，用插件就行了，把image图片打包到这里边去，对吧？那你就得干嘛呀，你就得写load的，相当于发一关的作用，对不对？这个什么将他们处理的外派，对吧，能够识别资源，可以理解一些翻译的过程，看到了吗？翻译的过程，因为外派自身只能理解谁啊，JS点点J层和点JS这样的一个文件，所以它就是一个翻译官。

对吧，具体怎么翻译，这里边你就写规则告诉我怎么看你用什么资源，用什么包去翻译什么样的资源是这个意思，所以这里边。我们要在这里边干嘛呀，我们要在这里边去把我们的呃模块写上，那这里边不是说写loader就行了，不在这里边写loader，而是用什么Mo Mo。对吧，分模块的去写，然后写。用它去指定规则。他去指定规则，那里边什么规则，那你这里边儿可以一个一个去写，那咱们后期再写，我先就放到这儿对吧，就写到这就可以，你具体的咱们讲。CSS以外咱们都会写这里的规则，这里的规则写的是最复杂的，对吧？当然它也不算是最复杂。然后第四个概念什么呢？第四个概念就插件，他说翻译官说已经能够教我们翻译了，那为什么还要插件呢？因为有些东西他做不了的，我们得用插件来配合他做，或者插件单独就可以完成，插件的功能是比这个loader功能更强大的。

它可以单独的去解析，去处理一些东西。也可以配合什么loader去处理一些东西。之这的一些功能啊，你看它插件用于执行范围更广的一些任务，当然包括从打包优化和压缩，一直到重新定义环境中的变量等等，都是通过插件来完成的，那插件呢，咱们就得一个包一包下载处理，什么情况咱们就要用到什么插件，比如压缩咱们用到一起压缩的插件对吧？打包用到打包的插件对吧？这俩有相似的地方，那他俩相互配合也可以独立去完成，就这样的功能对吧？或者是插件的功能对它一些补充。是这样的一个一个过程啊，那插件如果我们在阶层里边写，当然我们可以写空的啊。插件就是这个，然后里边呢，也是速度格式就可以了。那最后呢，是这个模式。你看模式，咱说的有开发模式只是外pad应用的模式的一个配置，有开发没模式和生产模式，这两个都清楚啊，在开发模式里边呢，配置比较简单，让代码能够本地调试运行就行了，因为是你在开发阶段用的，生态模式呢，是上线用的代码需要不断优化达到性能，最好让代码优化上线运行的一个环境，对不对？

对吧，他们都会自动启动音插件。这就不用了，咱们就加上这几个注释就可以了，那既然那块加上这两个模式，那我这块注释也不用了，那他最后不写东西，你就不用加括号，加不加都可以啊。这就是他的五个核心概念，那我们要运行web派的时候。他就会找这里边儿这五个核心概念，你想干什么，就在每个里边去写具体的东西就行了。就可以完成我们想要的一个操作。当然刚才这些步骤我也都给你写到什么，写到课件里边去了。接着。看到了。比如说这个是note里的语法二。前面我给大家也介绍了，说我会尽量少用路的里边东西，那有的时候不得不用的，咱就得用一下对不对，也少于ES6的东西，但不得不用的咱们也得去使用，好吧，那这个都是ES6语法对不对？把里边的方法直接拿出来形成一个方法，基本上你可以，如果记不住的话，你就是当成一个固定的用法就OK了。

啊，这节课。我们到这了解这几合一概念，那以后我就不会说每一个作用是干嘛，就会直接配置里边的东西了啊，谢谢大家这些方面。