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

【问题标题】：Automatically require (or copy) all images that are referenced in HTML using Webpack使用 Webpack 自动要求（或复制）HTML 中引用的所有图像
【发布时间】：2016-06-09 02:11:25
【问题描述】：

我刚开始在 Angular 1.x 应用程序中使用 Webpack，我有一个可行的解决方案，但我希望自动解析 html 和需要所有 IMG 标签。

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

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

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

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

【问题讨论】：

标签： angularjs webpack html-webpack-plugin webpack-plugin

【解决方案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 一开始真的很难，但是一旦你理解了它是如何工作的，你就再也回不去了。

【讨论】：

谢谢，是的，这正是我所需要的。