06-尚硅谷-webpack从入门到精通-打包html资源

好，接下来呢，我们来学习的是使用外派去打包我们的HL资源。好，我们来打开我们Vs code啊，我们来新建个文件夹二。叫做零四打包H资源。好，这呢，我们先写一些基本东西啊，写基本代码C。在S下面呢，新建一个文件叫DS，诶，这就是我们打包的入口文件了。我们今天还是写代码，稍微写东西啊写。只是为了测试而已啊。然后打印一下艾。不知道一加个二加个3OK。同时呢，在S下面呢，再新建个文件叫。对吧，好，这个HM里面呢，我们来写一下我们的结构代码啊。好，这呢，我写个标题，ID为title啊，内容呢为hello。咱们的这个H庙啊，Hello h。

写完了这个结构，写完了JS啊，其他的我就先不写了啊，我们来学习怎么通过文派呢，去打包这个资源，好，接下来我们写配置。好，我们在这个目录下的新建个文件配置文件。这是的配置文件，好，我们将基本配置写好，通过暴露出去一个对象。在对象里面呢，写上我们前面的五个核心配置，分别为ENT。对吧，打包的入口文件。好典型了呢C下面的index。好，第二个叫输出对吧，诶它呢是个对象，对象里面写两个参数啊，一个是呢，它的这个file这个名称啊，那么我们呢，还是叫S。好，第二个呢，它叫做叫做pass路径，路径呢我们一般是传绝对路径所这儿呢，要引入一个。

No的核心模块，Pass上面的一个方法。讲result。对吧。再加上变量啊，那么我要输出到这个的下面啊的面。OK啊，输出。好logo配置呢，就是写。值呢为一个对象，对象里面写呢为数组，在数组里面写的配置。当然了，现在我们还不知道要不要写，先不管。再来一个play。In啊in，然后为数组在这里面写的配置。好，最后一个是模式啊，为了开发，为了调试方便呢，我们啊还是这个开发模式。好，那么这儿呢，到这儿呢，我们的基本配置就写完了，好，那么到底怎么去使用PA去打包这个HL资源呢？哎，这儿呢，我们再写一下啊。

解释什么呢，之前啊，我们是要做的。Not呢用法呢，它需要先下载，诶第二步呢，再把这个资源啊给直接去使用。啊，或者说配置啊，都一样的，Page load page load。是吧，好，那plug诶接下来呢，我们啊要用的是插件去处理这个H用插件啊插件的话呢，也需要下载。不同的是呢，他还需要引入。第三步呢，才能使用。得这样，它需要下载已入使用好，那我们先下啊先下。下载CD点点。好，下载的NP mi下载这个包呢，叫做HL，这个插件呢，叫这个名字啊HL web pack。

好看D。好等它下载啊，我们来看一下啊，我们用的插件呢，是叫做htl APP。好下完下完之后呢，我们来就可以使用了啊，每次就使用了。好，怎么用呢，来。它呢插件呢，还需要引入啊，需要引入引入这个插件。HT。好，等于require。啊，这里才有小大头的秘法HLY排大啊，因为它是构子函数，所以或者说我们的一个类啊，是个类或者构子函数，所以最终用法呢，它是new调用就可以了。哎，这样呢，就可以使用了。好，他能做什么事呢？我们来看一下这个插件会做什么事啊，我们来运行看看效果啊啊，就能推测他做什么事了。

运行PE好，这时候没有报错啊，你会发现呢，输出的资源呢，多了一个要资源啊，多了一个，我们来打开看一下。好，这个资源呢，默认引入了这个啊Bill DS，诶注意啊，我们写的H呢，根本就没有引入过。我们可以看一下源代码SC啊，我们写的呢，根本就没引入过这个输入标签，同时我们有个H1标题啊，当然呢，输出的资源是没有的。所以它这个插件默认做什么事呢。会突然间一个HL文件啊，当然这里面是空的HM文件啊。就是没有任何结构样式的H文件。然后呢，引入打包输出的。所有资源。这些资源呢，就包含了，比方说我们的宅资源，或者是样式资源会引入自动引入啊，要打包输入资源，然后呢，输入出去。

就这样的。它默认是空的，那这里面没有任何结构，而我们写的时候需要结构怎么办呢？对吧，我们现在需求是。啊，需要有结构的。对吧？我们需要有结构的HM文件，怎么办呢？得加一个配置选项，叫做template。典型的S点斜杠下面的index h。那么这个什么意思呢？诶，就会创建一个。HL文件。那么什么文这个文件的结构呢？其实就是也不是创建，其实就是复制啊。就相当于是，相当于是复制这个这个文件。复制这个这个文件了，然后呢，并啊并加上它原本的功能。

并自动引入打包输出的所有资源。因为它会自动引入，所以我们就不需要手动引入了啊，所以要注意啊，所以不要手动引入了，所以我们这时候再运行看一下效果再运行啊，这里加了个table属性，这时候看起来输出的资源你看它就多了一个结构了，诶title呢也是正常的，是wepa对吧？然后呢，数据标签里面呢，是这我们打开看一下啊。打开看一下结构呢，是有的啊，然后呢。看哎，这里呢，也输出了五二加三等于五嘛。好吧，对吧，所以这里面他做了哪些事呢？我们大概捋一下啊。就是呢，这个插件呢，它会啊去单独的去运作一些事情啊，就我们其实在JS中并没有引入HM文件，这个插件呢，会自己去找这个文件，因为我给了他个路径，他会自己找，然后把这内容呢复制进来，然后输出去，只不过在输出之前呢，会将我们打包书上的资源呢，诶给添加到引入进来，如果是JS源就通过输入标签引进引进来，如果是样式资源呢，就会通过link标签引进来，它会自动引。

所以我们作为开发者不用操心这一点。那么我们要注意什么呢？注意就是我们千万不要自己再引了，因为它会自动引，如果你再引就引了两次啊，反而会出问题，所以我们千万不要再引入这个资源了。好了，那么这里面呢，就是我们的一个H文件的一个处理啊，使用插件我们H文件进行以下处理。啊，所以大家最后呢，要记得就是我们的load的使用和插件使用稍微有些区别，就插件啊，一定要记得引入它。啊，当然大家都要记得这些东西呢，都得下载，都得下载。那么呢，我们就到这。