webpack踩坑之路图片的路径与打包

webpack踩坑之路图片的路径与打包

在使用webpack进行项目开发时，难免会遇到图片资源的问题，主要问题集中在图片路径的设置和图片打包。

图片路径的设置

相对路径和绝对路径

在HTML中，图片的路径一般有相对路径和绝对路径两种方式。

• 相对路径：相对路径是指当前文件所在目录到目标文件的路径。比如：./favicon.ico就代表当前文件夹里的 favicon.ico 文件；../images/test.png就代表上一层文件夹的 images/test.png 文件。

• 绝对路径：绝对路径是指从文件系统根目录到目标文件的路径。比如：file://C:/User/xxx/images/test.png。

在webpack中，相对路径的设置需要考虑两个问题：打包后的文件目录和文件引用的地方。

publicPath

在webpack配置文件中，可以通过设置output中的publicPath来设置打包后文件引用的前缀路径。如：

output: {
  publicPath: 'http://cdn.example.com/assets/',
  // ...
}

这里将publicPath设置为http://cdn.example.com/assets/，则在HTML中引用图片时，会自动添加该前缀，如：

<img src="http://cdn.example.com/assets/images/test.png" />

加载器

除了publicPath之外，还可通过配置图片的加载器，解决图片路径的问题。常用的图片加载器有：

• file-loader：将文件拷贝到输出目录，并且返回相对路径，可用于处理任意文件类型；
• url-loader：与file-loader类似，但可根据图片大小选择base64编码或拷贝文件；
• img-loader：压缩图片；

示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于等于8KB则打成base64编码的格式，否则使用file-loader打包
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: '/images/',
            },
          },
        ],
      },
    ],
  },
}

在代码中使用以下语法引用图片：

import myImage from './my-image.png';

function component() {
  const element = document.createElement('div');

  // 将图像添加到我们现有的 div。
  const myIcon = new Image();
  myIcon.src = myImage;

  element.appendChild(myIcon);

  return element;
}

图片的打包

图片的打包与路径不同，更多的是针对图片的格式、大小、质量等优化问题。

在webpack中，我们可借助image-webpack-loader和html-loader来实现图片的压缩和打包。

• image-webpack-loader：压缩图片，减小图片大小，提高页面访问速度；
• html-loader：处理HTML中的图片引用。

示例：

module.exports = {
  module: {
    rules: [
      // 处理HTML中的图片
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src', 'img:data-src', 'audio:src'],
            },
          },
        ],
      },
      // 压缩图片
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            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中是比较重要的问题，需要结合相对路径和绝对路径的方式来设置路径，通过publicPath和加载器来实现；对于打包问题，我们可通过image-webpack-loader和html-loader来实现图片的压缩和打包。