Question

我正在开发一个反应UI组件，它依赖于另一个UI组件（react-widgets / lib / DropDownlist）。此javascript模块具有以这些文件扩展名结尾的资源：* .gif，* .eot，* .svg，* .woff，* .ttf。

Webpack4抱怨它不知道如何处理这些文件类型，我可能需要一个加载器来处理这些文件类型。一个错误是：

Error in .../react-widgets/dist/fonts/rw-widgets.svg?v=4.1.0
Module parse failed: ...
**You may need an appropriate loader to handle this file type.**

所以我需要使用适合这些文件类型的加载器来更新我的webpack.config.js文件。 My config is based off of this。 旁注：A 喊出去Mark England who wrote this article which does a fantastic job for how to create a reusable component。

相关摘录如下：

// Snippet from Mark's code webpack.config.js
 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
},

我知道syntax for webpack定义加载器是什么，但我不知道要使用哪些加载器。但是这个示例webpack配置文件不包括对这些其他文件类型的支持。

我尝试解决问题的方法

我通常使用create-react-app，所以我完全避免了这个问题。 :-)然而，它不允许我创建用于分发的反应库（AFAIK）。
首先，我在网上搜索了 webpack * .gif加载程序 。没什么用的。
接下来，我根据文件类型搜索 webpack加载器。这给出了一些很好的结果，描述了loader syntax，指向了一些加载器file-loader以及如何使用它们，this question on SO帮我实现了* .svg加载器可能就是我需要的加载svg文件。

{test: /\.svg$/, use: "svg-inline-loader"},

所以我可以使用svg-inline-loader作为* .svg文件。我可以为所有文件类型重复这种方法。

下一步是检查创建反应应用程序（CRA）

我主要在react中开发，并查看CRA webpack配置文件（因为create-react-app似乎在这些主题上保持领先优势）。所以我可以看到url-loader用于图像（基于node_modules/react-scripts/config/webpack.config.dev.js文件正在使用的内容）。

另一个下来......

我的问题

webpack（或其他网站）是否有一个表格列出了可用于给定文件类型的加载器？

例如，知道以下文件类型的好图像加载器是：

Webpack 4 *.gif, *.jpg => url-loader *.svg => svg-inline-loader *.eot => ???

我意识到因为webpack更像是一个插件/加载器架构，它可能不是 webpacks 所以有这个列表所以另一个网站可能需要它。

当您需要装载机时，您会做什么？ 如果找不到这个答案的中心位置，请分享如何找到解决webpack文件加载问题所需的加载器。

Answer 1

这完全取决于您的工作流程，您希望如何在运行时加载资产。

例如，如果你有很多图像，最好使用文件加载器并将它们直接放在构建目录中。

上述方法会增加GET调用，并且捆绑的js文件大小不会受到影响

如果你有更少的图像/小尺寸图像，那么你可以使用url-loader将它们转换为data-URL并将它们放在你的捆绑的js文件中。

上述方法将减少GET调用，并略微增加捆绑的js大小。

如果你想要两者的组合，那么你可以在url-loader上设置大小限制和回退加载器（文件加载器）。这样做，将计算dataURL的大小。如果大小超过限制，将使用文件加载器，它将把它放在构建目录中。

我如何使用

  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'images/',
          name: '[name][hash].[ext]',
        },
      },
    ],
  },
  {
    test: /\.(svg)$/,
    exclude: /fonts/, /* dont want svg fonts from fonts folder to be included */
    use: [
      {
        loader: 'svg-url-loader',
        options: {
          noquotes: true,
        },
      },
    ],
  },
  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    exclude: /images/,  /* dont want svg images from image folder to be included */
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'fonts/',
          name: '[name][hash].[ext]',
        },
      },
    ],
  }

什么webpack4加载器用于加载* .svg文件，* .gif，* .eot？

1 个答案: