Как правильно настроить загрузчик для png в веб-пакете?

Question

Ошибка синтаксического анализа модуля: неожиданный символ '�' (1: 0) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

Это то, что я пробовал в моем проекте Webpack:

const glob = require('glob');
const webpack = require('webpack');

const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
  entry: {
    button: glob.sync(`${__dirname}/components/index.js`),
  },
  output: {
    path: `${__dirname}/dist`,
    filename: 'index.js',
    library: 'components',
    libraryTarget: 'umd',
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    loaders: [
      {
        rules: [{
          test: /\.js$/,
          loaders: ['babel-loader'],
        }]
      },
      {
        test: /\.css$/,
        loader: 'style-loader'
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: './assets/media/',
              publicPath: './assets/media/'
            }
          }
        ]
      }
    ],
  },
  externals: [
    'prop-types',
    'react',
    'react-dom',
  ],
  plugins: [
    new UglifyJsPlugin({ minimize: true }),
  ],
};

В моем js-файле я пытаюсь импортировать и использовать простой png, подобный следующему:

import favicon from '../assets/media/star-full.png'
import beers from './beers.json'

<Card
  imgUrl={beer.image_url}
  name={beer.name}
  tagline={beer.tagline}
  iconFavorites={favicon}>
</Card>);

Согласно запросу мой файл package.json (в частности, я установилfile-loader 3.0.1):

{
  "name": "storybook-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "file-loader": "^3.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "url-loader": "^1.1.2"
  },
  "devDependencies": {
    "@storybook/react": "^3.4.2",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-plugin-react-css-modules": "^3.4.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "glob": "^7.1.2",
    "react-hot-loader": "^4.2.0",
    "style-loader": "^0.21.0"
  },
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook",
    "build": "webpack -p"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/chenchi13/storybook-project.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/chenchi13/storybook-project/issues"
  },
  "homepage": "https://github.com/chenchi13/storybook-project#readme"
}

Я продолжаю получать ту же ошибку, я получаю, что это, вероятно, из-за этой конфигурации Webpack, но я понятия не имею, что я должен делать ... Вседругие вопросы по этой же проблеме не объясняют должным образом правильный способ настройки Webpack, поскольку большинство ответов являются частичными и не дают достаточного понимания для решения этой проблемы.