如何在 index.html 模板中引用图像资源

Question

在导出为 index.html 的模板中，我有这一行：

<meta name="og:image" content="/assets/images/image.jpg">

我的目标是用散列名称导出它：

<meta name="og:image" content="/assets/images/image.hug2u3g5gx23g.jpg">

而是以原始名称导出。

我的 intex.html 模板加载为：

  new HtmlWebpackPlugin({
    template: './app.ejs',
    filename: 'index.html',
    chunksSortMode: (a, b) => scriptsOrder.indexOf(a.names[0]) > scriptsOrder.indexOf(b.names[0]),
    env: {isProd, isWeb, isHybrid}
  })

这是我的文件加载器：

{
  test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$)/,
  use: [
    {loader: 'file-loader', options: {name: '[path][name].[hash].[ext]', context: './src'}},
    {loader: 'image-webpack-loader', options: {}}
  ]
}

Answer 1

在 ejs -> index.html 模板中，像这样插入图像文件：

<meta name="og:image" content="<%- require('./assets/images/image.jpeg') %>">

如何在 index.html 模板中引用图像资源

How to reference an image asset inside the index.html template

webpack

webpack-html-loader

html-webpack-plugin