Веб-пакет не может найти изображение при импорте - модуль не найден

Question

Я использую webpack dev server для обслуживания простого приложения Typescript.В нем я пытаюсь загрузить изображение динамически в Typescript, например так:

import img from "./image.png";

const myImg = new Image();
myImg.addEventListener("load", ...);
myImg.src = img;

Все файлы HTML, TS и изображения располагаются рядом друг с другом, поэтому я использую относительный путь кзахватить изображение.Тем не менее, веб-пакет жалуется, говоря, что «./image.png» не является модулем.Я почти уверен, что это проблема конфигурации.Вот соответствующие файлы (некоторые значения изменены на общие значения):

package.json

{
  "name": "my_project",
  "version": "0.1.0",
  "description": "My project",
  "main": "index.js",
  "scripts": {
    "build-prod": "webpack --config webpack.prod.js",
    "start-dev": "webpack-dev-server --config webpack.dev.js"
  },
  "author": "Cyle Ven Dawson",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "tslint": "^5.11.0",
    "typescript": "^3.0.3",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8",
    "webpack-merge": "^4.1.4"
  }
}

webpack.dev.js

const merge = require("webpack-merge");

const commonConfig = require("./webpack.common");

module.exports = merge(
  commonConfig,
  {
    "devServer" : {
      "allowedHosts": [
        "dev.example.com"
      ],
      "disableHostCheck": true,
      "host": "1.2.3.4",
      "port": 12345,
      "public": "dev.example.com:12345"
    },
    "mode": "development"
  }
);

webpack.common.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const TsConfigPathsPlugin = require("awesome-typescript-loader").TsConfigPathsPlugin;

module.exports = {
  "entry": "./src/index.ts",
  "module": {
    "rules": [
      {
        "include": /src/,
        "test": /\.ts$/,
        "use": {
          "loader": "awesome-typescript-loader"
        }
      },
      {
        "include": /src/,
        "test": /\.scss$/,
        "use": [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        "include": /src/,
        "test": /\.(png|svg|jpg|gif)$/,
        "use": [
          'file-loader'
        ]
      }
    ]
  },
  "output": {
    "publicPath": "/"
  },
  "plugins": [
    new HtmlWebPackPlugin({
      "filename": "./index.html",
      "template": "./src/index.html"
    })
  ],
  "resolve": {
    "extensions": [".ts", ".js"],
    "plugins": [
      new TsConfigPathsPlugin({
        tsconfig: __dirname + '/tsconfig.json',
        compiler: 'typescript'
      })
    ]
  },
};