webpack配置图片和字体

前端开发中在css代码和html文件中会需要引用图片进行展示，而css代码和html文件引用图片资源分别需要配置不同的loader。

1. 配置图片的loader

css文件支持图片

css配置图片资源的话需要用到url-loader，而url-loader是依赖于file-loader的，所以需要两个都安装，loader配置代码如下：

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: {
    loader: "url-loader",
    options: {
      limit: 8 * 1024,
      esModule: false,
      name: "[hash:10].[ext]",
    },
  },
}

• limit：表示如果小于limit的值，webpack会将图片打包成base64格式的资源，这样做的优点是可以减轻服务器压力，不会再请求http，缺点就是会增加文件包的大小。
• esModule：表示会关闭url-loader的es6模块化，使用commonjs解析。
• name：表示打包出来的文件名，[hash:10]指的是随机10位hash数，[ext]指的是取文件原来的扩展名

html文件支持图片

html文件支持图片需要用到html-loader，它的作用也是专门处理html中的图片资源，从而能够被url-loader处理。

{
  test: /\.html$/,
  loader: "html-loader",
}

2. 配置字体的loader

这里的字体包的话用的是iconfont，iconfont需要引入很多字体文件：

@font-face {
  font-family: "iconfont"; /* Project id 3326825 */
  src: url('iconfont.woff2?t=1650107169231') format('woff2'),
       url('iconfont.woff?t=1650107169231') format('woff'),
       url('iconfont.ttf?t=1650107169231') format('truetype');
}

以上的字体问题需要在webpack中file-loader解析，配置如下：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  loader: "file-loader",
  options: {
    name: "[hash:10].[ext]",
  },
}