Webpack5 从粗浅认识到全面精通：图片、图标和数据的巧妙加载

2023-12-01 00:56:01

前言

在之前的章节中，我们使用asset module资源模块解析不同格式的资源，包括png格式、base64格式和txt内容。现在，我们将继续扩展我们的知识，探索图片资源加载的新方式，并学习如何引入icon。

深入解析图片加载

除了asset module之外，Webpack5还为图片加载提供了新的解决方案，即：url-loader。url-loader可以帮助我们实现各种格式的图片加载，包括jpg、png、gif、svg等。更重要的是，它还可以自动完成图片压缩优化，这无疑为我们的项目开发节约了大量时间和精力。

使用url-loader非常简单，只需在webpack.config.js中添加以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //图片文件小于10KB时将图片转换成base64字符串，大于10KB时将图片文件保存到硬盘中并生成URL
              limit: 10240,
              //图片文件输出的路径
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

图标资源加载

除了图片资源，我们还需要将icon资源加载到项目中。Webpack5提供了多种icon加载解决方案，其中包括file-loader和svg-loader。

file-loader用于加载非svg格式的icon，使用方式如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

svg-loader用于加载svg格式的icon，使用方式如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-loader',
            options: {
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

轻松引入数据资源

Webpack5同样支持数据资源的加载，这对于我们需要引入json、xml等格式的数据资源时非常有用。使用file-loader即可轻松实现数据资源的加载，配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(json|xml)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'data/'
            }
          }
        ]
      }
    ]
  }
};