html-loader处理图片资源以及字体，视频等资源

html-loader 用来处理html中图片资源

1. 安装

2. 配置

   webpack.config.js

   module.exports = {
     module: {
       rules: [
         {
           test: /\.html$/i,
           loader: "html-loader",
         },
       ],
     },
   };
   

处理其他资源，例如字体，视频等

1. 字体，视频等资源本质上也是文件资源，所以利用file-loader来进行实现

2. 下载字体等资源，常用的字体图标库iconfont，下载完成后会发现里面有css,js,json,ttf,svg等其他后缀名，然后建立font文件夹，将后缀名不同的文件放入不同文件夹内，之后在入口文件出，引入css文件，并修改iconfont.css否则会报错显示资源无法找到

   @font-face {
     font-family: "iconfont"; /* Project id  */
     src: url('../font/iconfont.ttf') format('truetype');  // 修改url中的路径，指向你自己的ttf文件所在路径
   }
   

   webpack.config.js

   {
           test: /\.(ttf|woff|svg|eot)$/i,
           use: [
             {
               loader: "file-loader",
               options: {
                 name: "[name].[hash:6].[ext]",
                 outputPath: "font",
                 esModule: false,
               }
             },
           ],
           type: 'javascript/auto'
         },
   

   测试：查看字体资源是否显示