使用 webpack 时如何引用图片资源？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用图片资源来装饰网站或者应用程序。而使用 webpack 打包工具可以帮助我们更好地管理和使用这些图片资源。本文将详细介绍如何使用 webpack 引用图片资源，以及一些注意事项和最佳实践。

引用图片资源

在使用 webpack 引用图片资源时，我们需要使用 file-loader 或者 url-loader 这两个 loader 来处理图片资源。file-loader 会将图片资源复制到输出目录，并返回图片的 URL 地址；url-loader 则会将图片资源转成 base64 编码，并将其嵌入到 JavaScript 中。

以下是一个使用 file-loader 的示例：

import imgSrc from './image.png';

const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

在上面的示例中，我们使用 ES6 模块化语法引入了一张图片资源，然后创建了一个 Image 对象，并将图片资源的 URL 赋值给 src 属性，最后将 Image 对象添加到文档中。

如果我们使用的是 url-loader，那么引用图片资源的代码会稍有不同：

import imgSrc from './image.png';

const img = new Image();
img.src = `data:image/png;base64,${imgSrc}`;
document.body.appendChild(img);

在上面的示例中，我们使用了模板字符串来构建了一个 base64 编码的图片资源 URL。需要注意的是，使用 url-loader 时，我们需要配置 limit 选项来控制是否将图片资源转成 base64 编码。如果图片资源的大小小于 limit，那么会将其转成 base64 编码；否则会使用 file-loader 处理图片资源。

配置 loader

在使用 file-loader 或者 url-loader 时，我们需要在 webpack 的配置文件中配置相应的 loader。以下是一个使用 file-loader 的配置示例：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images',
            },
          },
        ],
      },
    ],
  },
};

在上面的示例中，我们使用了一个 rules 数组来配置 loader。其中 test 属性用于匹配需要处理的文件类型，这里使用正则表达式匹配了 .png、.jpg、.jpeg 和 .gif 四种图片格式。use 属性用于指定使用的 loader，这里我们只使用了一个 file-loader。options 属性用于配置 loader 的选项，这里我们配置了图片资源的输出路径以及文件名格式。

如果我们使用的是 url-loader，那么配置文件会稍有不同：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[hash].[ext]',
              outputPath: 'images',
            },
          },
        ],
      },
    ],
  },
};

在上面的示例中，我们使用了和 file-loader 相同的配置项，同时还配置了 limit 属性来控制是否将图片资源转成 base64 编码。这里我们将 limit 设置为 8192 字节，表示只有当图片资源的大小小于 8KB 时才会转成 base64 编码。

注意事项和最佳实践

在使用 webpack 引用图片资源时，我们需要注意以下几点：

图片资源需要通过 loader 处理后才能正确引用。如果没有配置相应的 loader，那么图片资源的 URL 可能会出现错误。
在使用 url-loader 时，需要注意 limit 属性的设置。如果设置过小，会导致大量图片资源转成 base64 编码，增加 JavaScript 文件的体积；如果设置过大，会导致大量图片资源被复制到输出目录，增加网站或者应用程序的加载时间。
在使用 file-loader 或者 url-loader 时，需要注意输出路径的设置。如果输出路径设置不正确，会导致图片资源无法正确加载。

最佳实践：

在使用 webpack 引用图片资源时，建议使用 url-loader 而不是 file-loader。因为 url-loader 可以将图片资源转成 base64 编码，从而减少 HTTP 请求，提高网站或者应用程序的加载速度。
在使用 url-loader 时，建议将 limit 设置为适当的值，例如 8KB。这样可以在保证图片资源质量的前提下，尽可能地减小 JavaScript 文件的体积。
在使用 url-loader 时，建议在 file-loader 之前使用。因为 url-loader 会先尝试将图片资源转成 base64 编码，只有当图片资源大小超过 limit 时才会使用 file-loader。这样可以避免大量图片资源被复制到输出目录，减小网站或者应用程序的加载时间。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d270eaa941bf7134495061

使用 webpack 时如何引用图片资源？

引用图片资源

配置 loader

注意事项和最佳实践

接着读