Невозможно импортировать IMG_VAR из './images/name.jpg' с помощью babel / React / Webpack

Question

Предыстория (возможно, не относящаяся к делу): у меня большой реактивный проект, я меняю gulp -> webpack. Это изоморфно, поэтому я использую webpack-isomorphic-tools.

Итак, у меня есть эта строка, которая больше не работает:

const CANDLE_JPG = require('./assets/candle.jpg'); который возвращает ошибку:

.assets / Candle.jpg не следует присваивать переменной.

Но если я изменю это на:

import CANDLE_JPG from './assets/candle.jpg' Я получаю ошибку:

./assets/candle.jpg не должен быть импортирован с использованием импорта по умолчанию.

Мысли: я считаю, что это может быть проблемой с компиляцией Babel, но я не уверен. Я использовал require('babel-register') и мой ".bablerc" содержит пресеты es2015, react, а также stage-0 и включает в себя плагины transform-runtime, а также react-hot-loader/babel,

Загрузчик файлов:

const fileLoader = {
  loader: require.resolve('file-loader'),
  exclude: [/\.js$/, /\.html$/, /\.hbs$/, /\.json$/],
  options: {
    name: 'assets/images/[name].[hash:8].[ext]',
    emitFile: true
  }
};

Answer 1

Можете ли вы показать нам свою конфигурацию webpack? Вы, вероятно, должны использовать загрузчик изображений, как это, а затем использовать:

import CANDLE_JPG from './assets/candle.jpg'

и настройте веб-пакет следующим образом:

{
     test: /\.(gif|png|jpg)$/,
     exclude: path.resolve(__dirname, 'node_modules/'),
     use: [
          'file-loader',
           {
               loader: 'image-webpack-loader',
               options: {
                   bypassOnDebug: true,
                }
            }
      ],
}