浅谈 Webpack 如何处理图片(开发、打包、优化)

2023年5月19日下午9:09 • JavaScript

浅谈 Webpack 如何处理图片(开发、打包、优化)

在Web开发中，图片作为Web页面重要的组成部分，在Webpack中如何处理图片是一个必须要掌握的技能。常见的处理方式包括以下几种：

1. 在代码中使用 import 或 require 导入图片

Webpack支持将图片（包括PNG、JPG、GIF、SVG等格式）作为模块来处理，并通过模块化的方式导入。

首先在webpack.config.js中配置url-loader和file-loader：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000, // 图片小于10kb将被转为base64编码
    name: '[name].[hash:7].[ext]' // 图片名称的规则
  }
},
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000, // 文件小于10kb将被转为base64编码
    name: '[name].[hash:7].[ext]' // 文件名称的规则
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000, // 字体文件小于10kb将被转为base64编码
    name: '[name].[hash:7].[ext]' // 字体文件名称的规则
  }
}

然后在JS代码中import或require图片，如下所示：

import logo from './logo.png';

function createImgElement(url) {
  var img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}

createImgElement(logo);

在Webpack中，url-loader会自动将小于指定大小limit的图片转换为Base64编码，并返回一个data URL，可以直接作为图片资源使用。

2. 在HTML代码中使用图片

在HTML代码中使用图片，可以通过Webpack中的html-loader实现。

首先在webpack.config.js中配置html-loader，将其加入到module的规则列表中：

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        minimize: true,
        removeComments: true,
        collapseWhitespace: true
      }
    }
  ]
}

然后在HTML代码中使用import或require导入图片，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Webpack HTML Loader</title>
</head>

<body>
  <img src="${require('./assets/logo.png')}">
</body>

</html>

通过require导入图片的URL，Webpack会将图片移动到输出目录，并生成一个新的URL，然后使用HTML代码替换原始URL。

3. 优化图片加载

虽然在Webpack中使用url-loader将图片转换为Base64编码可以减少HTTP请求，但是对于一些大的图片或者访问较多的网站来说，这会带来性能问题。

对于这种情况，可以将图片分离出来，使用file-loader将图片输出到单独的文件，然后使用image-webpack-loader对图片进行优化，在网络带宽和加载时间之间取得平衡。

首先安装image-webpack-loader：

npm install image-webpack-loader --save-dev

然后在Webpack配置文件中加入image-webpack-loader：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: '[name].[hash:7].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        webp: {
          quality: 75
        }
      }
    }
  ]
}

在这里，我们使用了mozjpeg、pngquant等插件对图片进行了优化，可以根据实际情况选择性开启。

示例一：在代码中使用 require 导入图片

import bigImg from './assets/big.jpg';

var img = new Image();
img.src = bigImg;
document.body.appendChild(img);

在Webpack配置文件中加入对图片的处理规则，然后运行Webpack打包，此时big.jpg将会被打包到输出文件夹下。

示例二：在HTML中使用图片

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack Image optimization</title>
</head>
<body>
  <img src="${require('./assets/small.jpg')}">
</body>
</html>

在Webpack配置文件中加入对HTML的处理规则，然后运行Webpack打包，此时small.jpg将会被优化，并且被复制到输出文件夹下。

通过以上两个示例，我们可以了解到Webpack在处理图片的过程中，可以在代码中使用import/require导入、在HTML中使用图片，并且通过优化插件可以对图片进行优化，提高页面性能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈 Webpack 如何处理图片(开发、打包、优化) - Python技术站