Сбой при разборе модуля: неожиданный символ ' ' (1: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файла

Question

Я использую styleguidist для моего приложения реагирования, вот код моего файла styleguid.config.js:

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  }
}

Теперь я хочу показать изображение штрих-кода на моем сервере styleguidist, который работает на http://localhost:6060. Код моего styleguidist readme.md

```jsx
var Macybarcode = require('../../../containers/assets/img/macy/barcode.png');
const barcode_img = Macybarcode;
const barcode_no = "33527111690008";

<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />   
```

Но всякий раз, когда я пытаюсь показать изображение, мой сервер выдает следующую ошибку:

Пожалуйста, нажмите, чтобы увидетьОшибка консоли

Answer 1

try this line inside    
 { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

Answer 2

Вам нужен url-загрузчик для изображений

Использование:

npm install url-loader --save

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        },
        {
                test: /\.(jpg|png|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 25000
                    }
                }
            }
      ]
    }
  }
}