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

Question

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

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

我想知道这里有什么选择？

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

我刚刚开始使用 Webpack，但到目前为止我所看到的非常棒，尽管它确实需要与 gulp 不同的思维方式。

Answer 1

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

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

Automatically require (or copy) all images that are referenced in HTML using Webpack

angularjs

webpack

html-webpack-plugin

webpack-plugin