使用Webpack自动要求（或复制）HTML中引用的所有图像

Question

我刚开始使用带有Angular 1.x应用程序的Webpack，我有一个可行的解决方案，但不需要我的图像（这会强制将它们复制到构建目录）我希望自动解析html和需要所有IMG标签。

我似乎找到了一个模块，虽然它似乎不再被维护：https://github.com/webpack/html-loader

我想知道我的选择是什么？

选项是使用Webpack复制插件将项目复制到构建目录中，但这意味着我可以复制未使用的内容。

我刚刚开始使用Webpack，但到目前为止我看到的很好，虽然它需要一种不同的思维方式才能吞噬。

Answer 1

我在我的开发配置中使用了html-loader，它可以正常工作。我不确定你为什么要复制图像，但如果你想要的是需要的图像，html-loader将为你实现这一目标。 之后，我使用这样的url-loader：

   {
      test: /\.(png|gif|jpe?g)$/i,
      // if the file have ~50kb or less it's added to DOM as a data atributte, if not it's compressed as an image
      loader: 'url?limit=50000'  
   },

如果图像大于50kb，它会被复制到我的构建文件夹，如果我很小，我只是让它在DOM上作为数据来减少http请求的数量。

我希望这能以某种方式帮助你。 Webpack一开始真的很难，但是一旦你理解它是如何工作的，你就永远不会回去。