Webpack 入门指南：如何使用 Webpack 处理图片压缩-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一款流行的前端打包工具，它的特点是可以将多个 JavaScript 文件打包成一个文件，减少 HTTP 请求，从而提升页面的加载速度。除了 JavaScript 文件，Webpack 还支持处理 CSS、图片等资源文件。其中，图片的处理十分重要，因为它们往往会占用大量的页面加载时间。因此，本篇文章将详细介绍如何使用 Webpack 处理图片压缩。

安装 Webpack

首先，我们需要在本地安装 Webpack。可以通过 npm 或者 yarn 进行安装，在此不赘述。安装完成后，我们可以新建一个空的项目，然后在项目的根目录中创建一个目录叫做 src，再在 src 目录下创建一个文件叫做 index.js。

处理图片

加载图片

在 Webpack 中，可以使用 file-loader 或者 url-loader 来加载图片。这两个 loader 的作用是将图片文件复制到输出目录，并返回该文件的 URL。file-loader 可以将图片文件按照 hash 命名，而 url-loader 可以将小图片转换为 DataURL，从而减少 HTTP 请求。

在 index.js 中，我们可以引入一张图片：

// index.js
import img from './image.png';

const imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);

然后，我们需要在 Webpack 的配置文件中添加对图片的处理规则。在 module.rules 中添加以下代码：

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
              outputPath: 'images/',
              publicPath: 'images/',
            },
          },
        ],
      }
    ],
  },
};

上述代码表示，当 Webpack 遇到 .png、.jpeg、.jpg 或者 .gif 文件时，会使用 file-loader 进行处理。其中，name 选项表示输出文件名称的格式，outputPath 表示输出路径，publicPath 表示打包后的文件在浏览器中的访问路径。publicPath 选项也可以设置为 webpackConfig.output.publicPath。

压缩图片

加载图片只是第一步，接下来我们需要对图片进行压缩，从而减小图片的大小，提升页面加载速度。这里我们可以使用 image-webpack-loader 这个 loader 进行处理。

安装 image-webpack-loader：

npm i image-webpack-loader -D

然后在 Webpack 的配置文件中添加以下代码：

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
              outputPath: 'images/',
              publicPath: 'images/',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      }
    ],
  },
};

上述代码表示，当 Webpack 遇到图片文件时，会先使用 file-loader 将图片复制到输出目录，然后再使用 image-webpack-loader 对图片进行压缩。其中，mozjpeg、optipng、pngquant、gifsicle、webp 是一些压缩工具，可以根据实际需求进行选择和配置。在开发中，可以通过不同的配置和压缩工具，逐渐调整和优化压缩效果。

总结

本篇文章详细介绍了如何使用 Webpack 处理图片压缩。首先，我们需要通过 file-loader 或者 url-loader 来加载图片，然后再使用 image-webpack-loader 进行压缩。在实际开发中，可以根据需求自由选择不同的压缩工具和配置，以达到更好的压缩效果。希望本篇文章对大家学习和使用 Webpack 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652047e995b1f8cacd7c7c98