Webpack要求/导入图像而不进行扩展

Question

我想导入/获取没有扩展名的图像。这可能吗？例如，当前我可以在不编写扩展名的情况下导入jsx文件。如果我想对图像文件或其他缺少文件扩展名的文件执行相同的操作怎么办？

例如require（'./ avatar.png'）将起作用。我要工作的是require（'./ avatar'）

Answer 1

我强烈建议不要这样做，因为编写扩展名会使它更确切地说明要导入的内容。

例如，如果您在同一文件夹中有avatar.js，avatar.png和avatar.css，是否容易判断import ... from './avatar'会给您什么？具有不同扩展名的名称相似的文件并不罕见。

但是，无论哪种方式，您都可以在webpack配置中将所需的扩展名添加到resolve.extensions中。尝试对此负责。

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx', '.png', '.jpg', /* ... */]
  }
}