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

Question

我正在开发一个 react 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。

相关的sn-p是：

// 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 loader。没什么用。

• 接下来我搜索了 基于文件类型的 webpack 加载器。这给出了一些描述 loader syntax 的好结果，向我指出了一些加载器 file-loader 以及如何使用它们，this question on SO 帮助我意识到 *.svg 加载器可能是我加载 svg 文件所需要的。

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

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

下一个方法是检查 Create React App (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]',
        },
      },
    ],
  }