如何在使用HTMLWebpackPlugin时通过webpack加载图片？

Question

我正在使用HTMLWebpackPlugin，在我的模板中有一个img标签：

Translated text:

我正在使用HTMLWebpackPlugin，在我的模板中有一个img标签：

<img src="./images/logo/png">

如果你注意到了，这里我使用的是相对路径，认为webpack会触发在我的webpack.config.js文件中配置的文件加载器，但编译后我在html中得到了完全相同的src属性：

<img src="./images/logo/png">

我该如何触发Webpack动态替换这些相对路径，以及在我的Webpack配置中配置的任何东西呢？

- Anonymous

Answer 1

我不是Webpack专家，但我通过以下方式让它正常工作：

<img src="<%=require('./src/assets/logo.png')%>">

插件配置

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html'
  }),

根据文档：https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

默认情况下（如果您没有以任何方式指定加载器），会启用回退的lodash加载器。

<%= %>表示lodash模板。

在幕后，它使用一个webpack子编译，该编译继承了您的主配置中的所有加载器。

在您的img路径上调用require将会调用文件加载器。

你可能会遇到一些路径问题，但它应该可以工作。

- Eric Guan

---

我也用这种方法让它工作了。但问题是我正在使用自定义加载器，具体来说，我正在使用handlebars。它似乎不支持模板内的直接函数调用。其次，它看起来非常混乱。我不想一遍又一遍地重复这样做。我有数十个包含大量图像的HTML页面。 - Anonymous

点赞了，但让我感到沮丧的是，没有一种简单的方法可以使非必需的图像源与此插件良好地协作。 - Alexander Nied

结果：src="[object Module]" - Arthur Shlain

将"@arthur src="[object module]"解析为非ES模块格式，可以在loader的rule.options部分中设置esModule: false。详情请参见https://dev59.com/wFMH5IYBdhLWcg3w5VIw#62687448。 - Anthony

Answer 2

使用HTML webpack插件和html-loader对我很有帮助。

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

- Norma Mendonca

---

嗨，Norma，我按照你的建议操作了，但好像还不够。我得到了“需要适当的加载器”的错误提示。因此，您应该使用除htmlwebpackplugin和html-loader之外的其他东西。 - Denis

@Denis 是的，根据文件类型，您需要额外的加载器。请查看 https://webpack.js.org/guides/asset-management/ 获取一些示例。 - brettinternet

这个方法可以让 WebPack 从 HTML <img> 标签中导入图片而无需使用 require 语句，但它会阻止 _lodash <%= %> 被 HTMLWebpackPlugin 解释（导致文本未翻译），我找不到解决方法。请参见 https://github.com/jantimon/html-webpack-plugin/issues/223 - Anthony

正是我所需要的！我想如果我使用lodash表达式(<%=%>)，那么我就必须选择哪种方式去走，但在此之前，这非常出色。 - lance.dolan

您可能需要禁用 esModule：use: [{ loader: 'html-loader', options: { esModule: false } }], - Vahid

Answer 3

你应该使用CopyWebpackPlugin。 const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins:[
    ....
    new CopyWebpackPlugin({'patterns': [
        { from: './src/assets/images', to: 'images' }
    ]}),
    ....
]

这是将 src/assets/images 复制到你的 dist/folder/images。

- Voro

Answer 4

在使用 Webpack 的入门指南时，我遇到了这个问题。我正在使用指南中的模板代码并捆绑图像。但当我将现有的纯 html/js/css 项目迁移到使用 Webpack 时，我发现为了使用我想要的模板 HTML 加载方式（包含在模板中的图像资源路径），我必须从我的 webpack.config.js 中删除 asset loader 的用法，以便 html-loader 可以正确解析它在 dist 中创建的新散列路径。

要使用 Webpack doc 语法，请删除以 "-" 为前缀的行并添加以 "+" 为前缀的行。

module: {
  rules: [
    {
      - test: /\.(png|svg|jpg|jpeg|gif)$/i,
      - type: 'asset/resource',
      + test: /\.(html)$/,
      + use: ['html-loader'],
    }
  ]
}

- jseashell

Answer 5

您可以在webpack配置中使用url-loader，将大小在某个限制以下的图像编码为base64 uri，并将超过该限制的图像作为常规图像标签（相对于publicPath）添加到最终捆绑包中。

module.rules.push({
  test: /\.(png|jp(e*)g|gif)$/,
  exclude: /node_modules/,
  use: [{ 
    loader: 'url-loader',
    options: {
      limit: 10000,
      publicPath: "/"
    }
  }]
})

- varoons