什么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文件. 我的配置基于此. 旁注:马克·英格兰(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配置文件不包含对这些其他文件类型的支持.

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

• 我通常使用create-react-app,所以我完全避免了这个问题.:-)然而,它不允许我创建用于分发的反应库(AFAIK).

• 首先,我搜索了net webpack*.gif加载程序.没什么用的.

• 接下来,我根据文件类型搜索webpack加载器.这给出了一些描述加载器语法的好结果,指向了一些加载器文件加载器以及如何使用它们,这个问题在SO上有助于我实现*.svg加载器可能是我需要加载svg文件.

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

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

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