react url-loader webpack通用设置 output

在React项目中，当使用Webpack处理图片等小文件时，`url-loader`是一个常用的插件，它可以将这些文件作为内联数据或base64编码插入到JavaScript代码中，而不是单独作为一个外部请求。`output`选项在这里是用来指定生成文件的位置以及名称规则。

`url-loader`的配置一般出现在`module.rules`部分，例如：

{
  test: /\.(jpg|png|gif|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192, // 小于这个大小的图片会被转成DataURL
      outputPath: 'static/images/', // 输出文件的根目录
      name: '[name].[ext]', // 文件名模板，[name]表示原始文件名，[ext]表示扩展名
    },
  },
}

这里的`outputPath`指定了生成文件的相对路径，例如上述例子中，所有处理过的图片都会被放在`build/static/images/`目录下。

`limit`选项设置了转换为data URL的文件大小阈值，超过这个大小的图片将继续由其他如`file-loader`处理。

`name`选项用于给生成的文件命名，可以根据需要自定义，如上面的`'[name].[ext]'`表示每个文件名字保留原始文件名加上扩展名。