reactjs - 无法使用 babel / React / Webpack 从 './images/name.jpg' 导入 IMG_VAR

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'

并像这样配置 webpack：

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