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

Question

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

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

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

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

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

import CANDLE_JPG from './assets/candle.jpg', я получу сообщение об ошибке:

. / Assets / свеча. 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

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

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,
                }
            }
      ],
}