时间戳

首页 > 解决方案 > 什么 webpack4 加载器用于加载 *.svg 文件、*.gif、*.eot？

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

问题描述

我正在开发一个 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 文件。 我的配置基于此。 旁注：向写这篇文章的 Mark England 致敬，这篇文章在如何创建可重用组件方面做得非常出色。

相关的片段是：

// 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"]
      }
    ]
},

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

我做了什么来尝试解决问题

{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 文件加载问题所需的加载器。

标签： javascriptreactjswebpack

解决方案

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

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

上述方法会增加 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]',
        },
      },
    ],
  }

推荐阅读