Question

使用我的webpack.config开始：

{
   test: /\.(jpg|png)$/,
   use:{
          loader: "file-loader",
          options: {},
   },
},

在我的任何组件中：

import img from'../images/test.png';

我不知道为什么会这样。我已经多次使用过这个装载机，但我从未遇到过这个问题。当我包含 .png 图片时，我收到以下错误消息：

_react-setup / dist / app / images / test.png：1（函数（exports，require，module，__ filename，__ dirname）{ PNG                                                                 ^

SyntaxError：无效或意外的令牌

我没有做任何疯狂的事情。只是一个小型节点服务器，做出反应，对dom和样式组件做出反应。

有谁知道会发生什么以及如何解决？我也尝试将图像放在不同的目录中，但没有任何帮助。

提前致谢

完整的webpack.config

const path = require('path');

module.exports = {
  entry: './src/client/index.jsx',
  output: {
    filename: 'dist/public/bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        loader: "babel-loader",
        options: {
          presets: ["es2015", "react", "stage-2"],
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
    ]
  },
}

React无法导入任何组件中的图像

0 个答案: