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

Question

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

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

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

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

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

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

然后将调用文件加载器。

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

Answer 2

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

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

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

。

Answer 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: "/"
    }
  }]
})

Answer 5

我在遵循 Webpack 提供的入门指南时遇到了这个问题。我使用了指南中的模板代码和捆绑图像。但是，当迁移现有的普通 html/js/css 项目以使用 Webpack 时，我发现为了像我想要的那样使用模板 HTML 加载（模板中包含图像资源的路径），我必须删除该资源我的

webpack.config.js

中的加载程序使用

html-loader

来正确解析它在

dist

中创建的新哈希路径

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

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