Блог

Я пытаюсь использовать webpack для импорта изображений. вот так:

 import img from '../assets/bmo.png';
 

но я продолжаю получать сообщение об ошибке

модуль не найден: ‘../assets/bmo.png’

Я перепробовал всевозможные пути к изображению:

 import img from '../assets/bmo.png';
import img from '../../assets/bmo.png';
import img from './assets/bmo.png';
import img from './src/assets/bmo.png';
 

Импорт других файлов работает:

 import { GameOver } from "./scenes/game-over";
 

Моя структура папок

 index.html
-src
  -scenes
      game-over.ts
  -assets
      bmo.png
-dist
      bundle.js
 

Почему я не могу использовать import для импорта изображений?

Редактировать

добавлена конфигурация webpack

 var path = require('path');
var pathToPhaser = path.join(__dirname, '/node_modules/phaser/');
var phaser = path.join(pathToPhaser, 'dist/phaser.js');

module.exports = {
  entry: './src/game.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /.ts$/, loader: 'ts-loader', exclude: '/node_modules/' },
      { test: /phaser.js$/, loader: 'expose-loader?Phaser' },
      { test: /.(png|jpg|gif)$/, use: [{loader: 'file-loader', options: {
              outputPath: 'images',
      } }]}
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: '/dist/',
    host: '127.0.0.1',
    port: 8080,
    open: true
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      phaser: phaser
    }
  }
};