20.Webpack5从入门到原理-基础-处理html资源

下面呢，我们来处理H没资源。哎，那么有同学可能也会问啊，就是咱们T没资源，要咋处理呢？HL资源呢，它是这样的。我们现在呢，每次打包完之后呢，我们都是手动引入的。来看啊，我们是手动引入的，打包生成的这个宅资源。那么问题是什么呢？问题是将来啊，我们打包的叔叔的这个jes元，可能名字不叫面jes，可能它是会发生变化。这是其一，其二是将来我们打包可能会生成多个JS文件，甚至还有多个C文件。那么假设打包生成的十个GS10个C文件，我不可能手动的一个个把这些文件引进来，太费劲了。因为他们可能还存在依赖关系，我引错了位置，我还还会报错。所以我们希望呢，它能够自动的引入打包市场资源，这是最方便的。自动引入。所以这里面呢，我们就做个处理啊，我们呢，使用HM的一个插件来帮助我们自动引入打包是什么的东西，那既然它是自动引入，那么这个手动引入的就不需要了啊。

啊，手动引入的。我们通过插件来自动应用。这样会比较方便。好，呃，那么怎么样呢？我们来看这个插件，同样的来到官方文档，来到plugins。插件，那么在这里面找HL相关的插件。OK，这个找的过程我们就直接看了啊。在。在这一块啊，有一个HL插件，但是我没看到啊，在这里点击啊HL WiFi和。那么它用法呢，非常简单啊，下载引入new调用就好了。

下载。引入。呃，引入在上面。插件都是这样下单，你说然后就调用。OK，那么我们接下来打包就能看效果了。打包的时候呢，他会把HL资源也打包到这个D去，所以D下面会多一个HL资源，那么HL资源里面我们能看到它就引入了这个面积JS。是不自动引入了对吧，但是遗憾的是其他结构就没了，是不是我们希望它保留我之前写的这个结构，动结构，然后呢，再自动引入这个JS。怎么办呢？画面其了啊，那么这时候我们在这里需要写个属性，这个其实在公共内容有体现啊，就是我们就不看了，叫ten。

好，我们来找这个public。下面的in OK的意思就是模板。啊，以这个public下面的文件为模板，创建新的H文件。啊，新的文件呢，有两个特点。其大H文件的特点。那么第一个啊，结构和原来一致。结构就是do结构啊，第二个会自动引入打包的资源。所以我们再打包，我们可以看到这个输出的呢，它就会跟有点不太一样，它的结构全都来了。

同时还会自动引入这个打包生成的资源，所以我们将来要运行的这个文件呢，就是打包输出的这个HL文件就好了，之前的那个文件就不需要管了，诶你看还是没有问题的。好之前的文件呢，注意这里千万不要手动引入啊，因为你手动引入的话呢，这个路径就有问题啊，就不太。也不是路径有问题就不太好有问题，呃，所以这样就代表就是，其实说白了就是这个JS的被引入了两次就没必要，所以我们要把之前手动引入的给去掉，然后让它自动引入就好了。那么自动引入的时候呢，它用了一个different关键字，诶有兴趣的大家可以查阅一下有什么用，未来我们讲这个pre这些东西的时候，会提到这些关键字的一个用法。现在呢，有个悬念啊，大家可以自己关注一下。