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

【问题标题】：How to load images through webpack when using HTMLWebpackPlugin?使用 HTMLWebpackPlugin 时如何通过 webpack 加载图片？
【发布时间】：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 配置中配置的任何内容？

【问题讨论】：

标签： javascript node.js webpack html-webpack-plugin

【解决方案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 来解决。见stackoverflow.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'],
    }
  ]
}

【讨论】：