深入 Webpack5 等构建工具系列三(2) - file-loader 文件名和文件路径设置

2023-11-25 08:49:49

Webpack 进阶之路：精通 File-Loader 的文件名和文件路径设置

文件路径设置

在 Webpack 中，我们可以使用 file-loader 来处理文件，包括图片、字体和媒体文件。文件路径的设置对于管理输出文件的位置和结构至关重要。file-loader 提供了多个选项来配置文件路径，包括：

absolute ：指定输出文件的绝对路径。这对于将文件输出到特定目录很有用。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              path: '/assets/',
            },
          },
        ],
      },
    ],
  },
};

relative ：指定输出文件的相对路径，相对于 webpack 配置文件所在目录。这对于将文件输出到与配置文件同级的目录很有用。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              path: 'assets/',
            },
          },
        ],
      },
    ],
  },
};

文件名设置

除了文件路径外，我们还可以使用 file-loader 配置文件名。这包括指定输出文件名的格式和结构。file-loader 提供了以下选项来配置文件名：

name ：指定输出资源的名称。这允许我们自定义输出文件的名称。例如：

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

outputPath ：指定输出资源的路径。这允许我们将输出文件放置在特定目录中。例如：

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

publicPath ：指定资源在应用程序中的访问路径。这对于配置 CDN 或内容分发网络很有用。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '/assets/',
            },
          },
        ],
      },
    ],
  },
};