Web前端框架通用技术 webpack5 3_webpack的安装和体验 学习猿地原创

大家好，我是学习园地的特约讲师高洛峰，上节课呢，我们认识了web派，以及了解了web派的一些简单的工作原理，当然了它的呃详细的工作原理，等我们学会了使用它对吧？来开发我们项目，那你对他了解能更呃深入一些。那这节课呢，我们就安装一下webpa和做一些简单的体验，了解它的打包的一个过程来。嗯，课件里边呢，给大家写好了详细的一个这样的一个过程啊，大家可以照着去使用去做，当然了啊，我这里给大家做实验啊，笔记我就不记录了，在课件里边呢，都是有的，你可以照着课件一步一步去完成就可以了啊，我写代码呢，尽量呢也跟课件一致即可，这里边咱们建一个项目，比如就叫做web pack，比如说咱现在用的是五的版本，那就叫web派五，然后我们我们打开这个工具文件，新建一个项目。那我们这块选择。呃，外派5OK创建在当前这个窗口里边，打开打开一个新的这文件夹里边，呃，什么都没有对吧，然后呢，呃，我们在这个里边。

我们打开。这个NP看一下NPM稍微吧，你看我们，呃，上次课讲的什么NPM已经在这里面了，那我们打开这个终端，那首先呢，我们需要在这里边先把NPM的这些配置文件。Pack，点杰森这个文件，我们先建好那NPM对吧，Init-Y对吧，或者是杠杠yes，就是直接忽略我们一步一步的输入。我都简写吧，方便你看，就在这个目录下。我们就出现了一个package Jason，当然了，这里边你想初始化什么东西，你可以在这里边一步一步去做清楚吧。主方法应带点GS啊对吧，入火文件啊什么的东西，他都给我们写好了。然后呢，我们初始化了这个文件之后，那我们就需要安装我们的web pack，需要两个包，一个呢是什么we pack这个包一个是可以在命令行执行web派这样的命令的，所以呢叫做外派脚手架，也就是杠c Li。

C呢，就是呃，命令行可以执行的，需要这两个包，那我们安装一下用NPM，一个是NP mi，就是去安装对不对，安装什么呢？安装一个web pack，当然可以一起安装桌子web pack-cli脚手架对不对，然后呢杠。D。杠D的意思就是杠杠，什么save，杠DV是一个意思啊，我也直接用缩写杠D什么意思呢？开发环境不是运行环境，也就是这个工具，不是说上线之后我们也用，对吧，打完包之后我们只用那个打好的包，对不对，它只是打包的过程，所以肯定是在开发的时候用的，那如果我们装的解query，肯定随着项目上线运行啊，所以那个呢，就是什么运行式环境。我们安装一下。当然了，这就装到我们这个项目的当前这个目录上了，得等待一下，装完之后就会在我们这里边开发环境里边。

有我们这样的一个，呃，两个包装上等待一下。因为我现在用4G，所以呢，这个网会稍稍慢一些。等他一下。装完了之后，那我们就需要写代码，那我们需要在这个地方。就要干嘛呀，我们把默认写的源代码，它都到src目标去找，所以呢，我们在这块新建一个文件夹，叫做src。别忘了建这一个文件，那在一下src下边呢，你就可以写自己想要的东西了，对吧，这文件里面自动更新，我再双击一下。关掉。应该会自动更新的。没有更新我们的包呢，外派看下我们的版本。你看外B派用的是5.10，现在是最外派五脚水袋呢，用的就是密码行的工具，用的是4.2.0，是两个东西啊啊没关系啊，你下载过来了，他这个更新比较慢，看到了吧，然后呢，又出现了什么这个model这个目录，他把东西都装到这个下边，第三方的软件包放在这下边，具体在哪块，你可以自己去找这个，当然了，看这个嗯，也没有什么用，对不对，所以这个呢，咱们就不来看了，就说别人写的代码对不对，你看第。

在开发环境下有了这两个对吧。金价密点。那我们现在就在src下边，我们就可以建我们的文件了，然后用它的打包，比如说我们新建一个，首先呢，在这里边，比如说我新建一个，当然你这里边可以建一些子幕都可以啊，都没关系，比如说我们建加va s文件，我们叫做呃，换点JS随便起的名啊，那这里边儿随便起几个，比如说。啊，我们就你写什么代码都行，然后呢，只要把这几个代码暴露出去就可以了，比如说我这里边几一个用外ES6语法，用VR也行啊，我这里边只要让你知道外派给支持这样ES6语法，比如说明的N等于100，生明一个变量对不对，然后呢，生明一个函数ad做一个随便做一个添加函数对不对，做一个X一个Y这样的。

一个代码，然后呢，我这里边很简单，返回X加Y这样的一个函数，你比如说我在做一个action DEMO这样的一个函数，里边呢，呃，就随便写一个字符串，然后呢，我这里边儿直接返回。Re g返回，直接返回就做错吧，这个方法就很简单，然后呢，我想用别的模块可以包含这个万.gs可以含这个one.s那怎么办呢？那我需要在这里边把它暴露出去，用E，用那个，呃，Node里边呢，Comment GS Mo model点使用它暴露出去，Ex，这个对吧？等于暴露什么呢？我把这几个都放在一个阶分对象里边，比如说。嗯。值是N一个对吧，把ADAD暴露出去，然后呢，再把什么再把DEMODEMO暴露出去，这样的话不是三个对象吗？那ES6里边呢，有更简便语法，如果你前边的键和后边的值是相同的话，写一个就行。

如果前边和后边相同一个就行ad，如果前边后边相同写一个就行M对吧，当然这个这么小就放在一行吧。当然这在ES6讲ES6语法的时候，到时候我会再详细的讲啊，这是呃，ES里边针对杰森新加的一个这样的一个语法啊。好，那这样的话我们就将问号加不加就行了，这样的话就将这个报出去了，那如果我们加载这个模块。就拥有了一个变量，两个方法是这样的，然后呢，我们在src下，我再新建，再建一个文件，比如说。叫做呃t.JS叫to.gs吧，再写两个，我引入one这个包，那我们还用common.gs不用ES的语法，如果用ES语法com啊put，比如说这里边N对吧N，然后ad，然后呢是啊DEMO，然后在这里边from什么什么什么，这ES6的语法，咱且不用ES的语法，因为咱还没具体的讲，他说尽量先避开啊，那我用comment.gs这样的语法去讲，那同样。

有铝块包含什么呢？一定要当前目录下来，因为它是当前目的y.GS咱说了，后边的在讲NPM的时候，咱也讲过，后边点GS可加可不加，对不对，你看它默认已经给我们怎么着，给我们去掉了这条GS，那它暴露出来有三个。一个变量对吧，这稍稍建议语法一个变量两个方法对不对，那如果我接收的时候跟他一样，就会相当于声明的这几个变量，就叫结构赋值，一共给我们一下全拿过来，那我这里边cost直接使用E的语法接收一下吧。咱们这个它暴露的，那我直接用这个同样的结构去接收，那相当于就声明了这个N的变量，这个N就是这里边的这个，不然的话我得一个一个去接收，对不对，一个一个去处理，对吧，比较麻烦，所以呢，用这种方法E语法一下全给你接收过来，所以在这里边我们就可以使用一个变量和这样的语法，那比如说我现在用AB的，用AB的方法对吧，它不是相加的方法吗？那我这里边把那个拿过来的N加过来，然后这里边呢，我再随便说明一个，嗯，B的变量等于随便写一个20。

然后把让N加B这样的语法拿过来，然后呢，让它交给一个变量求和嘛，等于我这里边儿没有调用什么，没有调用DEMO对吧？DEMO没有调用这是有目的的啊，没有调用N是100，然后这个加完之后肯定是一百二对不对，那我在这里边打印一下。啊，打印一下这个这个结果。啊。嗯，不在这打印也行，那我再换另外一个文件打印，你看这不有这个结果吗？我把这结果也暴露出去，使用Mo这个JS里面语法等于。Sum，把它暴露出去，也把它暴出去。然后呢？其实你写一个文件也行，直接用对不对？你比如说写一个，那看不出它打包的作用，所以能多写几个，所以咱们再写一个入口文件，加载的这个入口文件我们也叫JS文件，那我们叫做index.js，这个是入口文件默认打包的时候会先找这个文件，这文件里边你包含了哪个文件，它就会去找哪个文件，比如说在这里边，那我直接。

嗯，Re q ree，包含谁呢？包含我把这个不加载，Y我只加载一个谁啊，当前目录下我只把这个。to.js文件夹进来，因为to点文件又加载one这个文件，它是不是一个树状图啊，所以在打包的时候呢，它会根据这种什么模块之间的加载关系，这个文件里边会找到这个文件，这个文件里边又会找这个文件。所以呢会打包成一个文件，是这样的一个过程啊，所以呢，你几层都可以互相包含都可以，当然了默认的它现在只能处理谁啊JS和点JS为后缀名的这样的文件，那通通就是只能是加va串文件，那怎么处理STML的，咱们随着课程讲，咱们再去说对不对，这里边我们直接接收sum。这后来一个等号，相当于把它接收过来，直接变成变量啊，那直接变成变变量，我就S于m.rog我直接是不是就可以打印了这样一个过程啊，其实写的这过程尽量我写的其实就跟我课件里边写的是一样的过程，这样的话，呃，让你在做实验的时候，你是可以去用的，只要有包含关就行，里边暴不暴露都无所谓，对不对，看你用不用，那你不暴露的话，你不使用这种暴露出去的话，那你那页面也用不了对不对，它就相当于一个没有关联的文件，有这样的话，那就是一个模块化的这样的文件，那好。

那现在这几个文件都有了，那我怎么去打呢。你看。有入口文件了，它会根据默认这个入口文件就叫做什么in带点JS，因为我们在JS里边，你看这里边看到了入口文件是不是这个这个文件的对不对，那然后呢，它也会自动默认webpad，会自动找SR新目录下，所以呢，你写在别的目录下的inex的文件，这个不好使的，会自动找这个文件，所以我在什么也不配置情况下，我直接用web。派你看啊，我直接一回车就可以，但是呢，我得指定一个模式什么呢？因为我是想在开发过程中看这个结果，还是我想打完包看上线之后的那个生产环境的结果，所以呢，有两种模式，我先给你切换一下，先看一下嗯，开发模式mod看啊指定这个模式，什么模式呢？Dev lot。

我忘了这块有没有等号，好像是没有等号，先回答一下。你看编译完了，编译完了之后，我们会看一下这块会出现一个默认出现一个bitst的目录，Bitt目录呢，会给我们默认出现一个慢点GS目录，这个就是给我们把刚才这几个文件按照one派，根据主入口里边这张树状图把这几个合到一起，让我们合成一个这文件，那我们看一下这个文件的内容，你看一下这个是我现在用的模式是什么，是develop对吧，是开发环境，那开发环境呢，它就给我们加了一些注释和说明，你看这里边告诉我们SS加one.js文件对不对，给我们做成了一个什么样的一个模式，然后呢，吐点这个文件。给我们打包成，给我们做成一个什么样的一个格式，对吧，都是用com JS这个对吧，然后呢，这边一过程，你看代码感觉有点复杂对不对。

对吧，那我们现在就可以干嘛呀，就可以直接运行这个文件，看一下它能不能打印了，那我们用node运行node。嗯，这文件也是可以运行的，漏的那目录下DT下边的，因为我在外派目录下，但是没有这么运行的，咱只是写一下manin.GS，你看120是把那结果就出来了。那这个大家看到这记得是开发环境，我们开发的时候，你看这个文件结构是比较清晰的，对不对，那我们看一下，如果我们上线就拿这个文件上线，那里边这么多注释，还不如我们原来写代码对吧？东西小了，你看这几个文件给我们打包完，你看这些大小对不对，用了这个时间对吧，2.59KB看到了吗？那我现在改给它改成。你看这个文件它生成的，那我可以把它什么呢？可以把它删掉。看一下删掉，但是不删掉的情况，它会覆盖，你看我再换一下模式。

换成生产环境，生产环境呢，我们使用的p production使用这个模式再去运行一下。你看这个大小是不是才有331个字节啊，是不是变成小了，那我们看一下这块，你看这个目录也生成了，在这里边。看到了。我们压成这样了，注释有吗？没有，对不对。最后我们上线的是这样的程序就可以了，那时候我也想判断这个结构怎么能恢复原来的格式，你按加L在我们这里边就可以了，当然你不用去这么做啊，你上线之后，你你这么打开它干嘛，对不对？你看这是给我们压缩，你看变量名什么的都可，我们变得很短对吧，都尽量是一个字母。尽量是一个字母，你看给我们用B包的方式对吧，这样去运行，后边调用给我们压缩成了这样的结构，看到了吗。这样的结构。这就是。啊，外派的，你看我们现在什么也没做，只用到了外派脚手架，这样的话切换一下模式就可以了，那有的说了。

能不能干嘛呀。能不能我们入口文件自己指定啊，然后生成压缩后的文件名自己指啊都可以，你想怎么做怎么做，当然那些东西就得怎么着，就得我们就需要我们去去配置了。好吧，当然了，这个压缩后打包号的这个文件，我们如果想在程序里边用的话，我们也可以这么用，你看我在呃，Src下边，当然HTM文件它是默认是没打包的啊，我们新建一个HTM文件叫做index.inextml你看in.M这里边，如果我想使用这个文件，那我可以这。这块我使用src。找到什么呢？上一级目录下的，因为在src的目录下嘛，音袋子对不对，你看我这么找啊，当然了，实际工作是不这么找的，咱们还有把什么把音带联TML也打包到这里边去，那是咱们配置TL的时候再再说的，现在咱们说怎么去用这个文件，不用note去用对不对，这这个幕下是不是用慢点JS对不对，你看延伸过来。

使用。压缩包压缩。使用，嗯，压缩包简单咱们用一下，然后我运行一下，那你看一下可不可以，你看使用压缩包F12压缩包里边有个conso打印对不对，120是不是就可以了，这是在HTM里边，现在能只是简单这么使用啊，没有真正的将这个HTML和csa打进去。对吧，那是咱们后边一点点学的这样的一个过程。这只是咱们稍稍体验了一下这样的一个过程。好，这节课我们就讲到这里，下节课我们就开始学习它这里边，呃，核心的一些概念，如何处理入口出口对吧，和一些loader插件那些问题，好，谢谢大家，可咱们这里。