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

Posted 2023-03-07

【中文标题】使用 HTMLWebpackPlugin 时如何通过 webpack 加载图片？

【英文标题】：How to load images through webpack when using HTMLWebpackPlugin?

【发布时间】：2018-04-17 23:59:33

【问题描述】：

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

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

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

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

如何触发 webpack 以动态替换这些相对路径，以及我在 webpack 配置中配置的任何内容？

【参考方案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 然后将调用文件加载器。

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

【讨论】：

我也让它像这样工作。但问题是我 am 使用自定义加载器。具体来说，我正在使用车把。而且它似乎不支持模板内的直接函数调用。其次，它看起来很乱。我讨厌一遍又一遍地这样做。我有几十个 html 页面，里面有很多图片。

赞成，但让我感到沮丧的是，没有一种简单的方法可以让非必需的图像源与这个插件很好地配合。

结果：src="[object Module]"

@arthur src="[object module]" 通过在加载器的 rule.options 部分设置 esModule: false 来解决。见***.com/a/62687448/2784280。

【参考方案2】：

您应该使用CopyWebpackPlugin。

const CopyWebpackPlugin = require('copy-webpack-plugin');

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

这是将src/assets/images 复制到您的`distfolder/images'。

【参考方案3】：

使用带有 HTML webpack 插件的 html-loader 对我有用。

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

【讨论】：

嗨诺玛，我听从了你的建议，但似乎这还不够。我收到错误“需要适当的加载程序”。所以你应该使用除了 htmlwebpackplugin 和 html-loader

之外的其他东西

@Denis 是的，您需要一个额外的加载器，具体取决于文件类型。查看webpack.js.org/guides/asset-management 获取一些示例。

它允许 WebPack 在不使用 require 语句的情况下从 HTML 标签中提取（导入）图像，但它阻止了 _lodash 被 HTMLWebpackPlugin 解释（不翻译文本）我找不到解决方法。见github.com/jantimon/html-webpack-plugin/issues/223

正是我需要的！我想如果我使用的是 lodash 表达式 (<%=%>)，那么我必须选择走哪条路，但在那之前，这很好

【参考方案4】：

你可以在你的 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: "/"
    
  ]
)

【参考方案5】：

我在遵循 Webpack 提供的入门指南时遇到了这个问题。我正在使用指南和捆绑图像中的模板代码。但是，当迁移现有的 vanilla html/js/css 项目以使用 Webpack 时，我发现为了像我想要的那样使用模板 HTML 加载——模板中包含图像资源的路径——我必须删除资产我的webpack.config.js 中的加载程序使用html-loader 正确解析它在dist 中创建的新散列路径

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

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