Webpack 图片路径与打包指南

2024-01-25 23:33:12

在Webpack中，除了js类型的文件是能够直接被识别并打包，其他类型文件（css、图片等）则需要通过特定的loader来进行加载打包，而图片则需要用到file-loader或url-loader。

在JavaScript中引入图片路径时，Webpack并不知道它是一张图片，因此我们需要使用loader来告诉Webpack如何处理它。

file-loader

file-loader是Webpack中最常用的图片loader，它可以将图片文件复制到输出目录，并返回图片文件的路径。

要使用file-loader，需要在Webpack配置中安装并配置它：

npm install --save-dev file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

在上面的配置中，我们告诉Webpack将所有png、jpg和gif格式的文件都交给file-loader处理。file-loader会将这些文件复制到images目录中，并返回文件的路径。

url-loader

url-loader和file-loader类似，但它还可以将图片文件转成base64编码，并直接嵌入到JavaScript代码中。这对于一些小图片很有用，因为它可以减少HTTP请求的数量。

要使用url-loader，需要在Webpack配置中安装并配置它：

npm install --save-dev url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

在上面的配置中，我们告诉Webpack将所有小于8KB的png、jpg和gif格式的文件都交给url-loader处理。url-loader会将这些文件转成base64编码，并直接嵌入到JavaScript代码中。对于大于8KB的文件，url-loader会将它们交给file-loader处理。

路径配置

在Webpack中，图片文件的路径是相对于Webpack配置中的context属性的。默认情况下，context属性的值是项目的根目录。

如果需要在项目中使用绝对路径，可以将context属性的值设置为项目的绝对路径。

module.exports = {
  context: '/Users/username/projects/my-project',
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};