javascript - 什么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 .

相关片段是:

// 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，所以我完全避免了这个问题。 :-) 但是，它不允许我创建用于分发的 React 库(据我所知)。

• 首先我在网上搜索webpack *.gif loader。没什么用。

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

{测试:/\.svg$/，使用:“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

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

例如，如果您有很多图像，使用文件加载器并将它们直接放在构建目录中可能是个好主意。

上述方法会增加GET调用，不会影响打包后的js文件大小

如果您的图像较少/尺寸较小，那么您可以使用 url-loader 将它们转换为数据 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]',
        },
      },
    ],
  }