Question

背景（可能无关紧要）：我有一个很大的反应项目我正在改变gulp - ＆gt;的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配置吗？您可能需要使用 this 之类的图像加载器，然后使用：

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

使用babel / React / Webpack

1 个答案: