一分钟读懂Webpack 5 + React 之 url-loader

2023-12-17 09:42:54

什么是 url-loader？

url-loader 是 webpack 中一个非常有用的 loader，它可以将文件转换为 DataURL，从而可以在 HTML 和 CSS 中直接引用文件。这可以减少 HTTP 请求的数量，从而提高页面的加载速度。

url-loader 的基本用法

url-loader 的基本用法非常简单，只需要在 webpack 配置文件中添加以下代码即可：

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

以上代码中的 limit 选项指定了文件的最大体积（以字节为单位）。如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有文件都复制到输出目录中。如果文件体积小于限制，则 url-loader 会将文件转换为 DataURL 并将其作为 base64 编码的字符串嵌入到 HTML 或 CSS 文件中。

url-loader 的常见配置选项

除了 limit 选项之外，url-loader 还提供了许多其他配置选项，可以根据需要进行配置。这些选项包括：

name：指定输出文件的名称。默认情况下，url-loader 会使用文件的原始名称。
mimetype：指定输出文件的 MIME 类型。默认情况下，url-loader 会根据文件的扩展名自动确定 MIME 类型。
fallback：指定当文件体积大于限制时要使用的 loader。默认情况下，url-loader 会使用 file-loader。
publicPath：指定输出文件的公共路径。默认情况下，url-loader 会使用 webpack 的 output.publicPath 选项的值。
outputPath：指定输出文件的输出路径。默认情况下，url-loader 会将输出文件输出到 webpack 的 output.path 选项的值中。

Webpack 处理url-loader的工程案例

以下是 webpack 处理 url-loader 的工程案例：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ],
};