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

Question

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

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

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

选项是使用 Webpack 复制插件将项目复制到构建目录中，但这意味着我可能会复制不使用的东西。

我刚开始使用 Webpack，但到目前为止我所看到的都很棒，尽管它确实需要不同类型的思维来吞咽。

Answer 1

我在我的开发配置中使用 html-loader，它可以很好地满足我的需要。我不确定您为什么要复制图像，但如果您想要的是所需的 imgs，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 一开始真的很难，但是一旦你理解了它是如何工作的，你就再也回不去了。