Импортировать файл PNG из `webpack.config.js `

#javascript #reactjs #webpack

#javascript #reactjs #веб-пакет

Вопрос:

Я пытаюсь добавить мета-тег в свой index.html файл, используя Webpack (и html-webpack-plugin) в моем приложении React.

 const ogImage = require('./src/assets/images/og_image.png');

// ...later in the file:

plugins: {
    // ...other plugins,
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './src/index.html'),
        meta: {
            'og:image': ogImage,
        },
    }),
}
  

Но как только я запускаю проект, я получаю сообщение об ошибке:

 > webpack-dev-server --hot --mode development

D:devprojectsfoobarsrcassetsimagesog_image.png:1PNG


SyntaxError: Invalid or unexpected token
  

Как это можно решить?

Цель состоит в том , чтобы иметь что — то похожее на способ HtmlWebpackPlugin введения a favicon . Вы просто указываете путь к файлу, и плагины загружают этот ресурс для вас и включают его в пакет.

Спасибо!

Комментарии:

1. вы не можете require создать изображение в nodejs.