Изображения не загружаются в приложение React с Webpack, несмотря на наличие файловых загрузчиков (url-загрузчик) - PullRequest
Новая
       26

Изображения не загружаются в приложение React с Webpack, несмотря на наличие файловых загрузчиков (url-загрузчик)

0 голосов
/ 23 апреля 2019

У меня есть приложение React, которое использует Webpack и Babel. Я пытаюсь загрузить изображение в любом случае возможно (svg, png ...), но я получаю сообщение об ошибке "Неожиданный символ ' ' (1: 0)> 1 | PNG". Я установил url-загрузчик (npm install url-loader --save-dev), который должен помогать загружать изображения при использовании Webpack. Ничего не изменилось.

Это мой webpack.config.js: 

const {NODE_ENV} = process.env;

module.exports = {
  mode: NODE_ENV === 'production' ? NODE_ENV : 'development',
  entry: ['./client/index.js'],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 25000
            }
          }
        ]
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },

  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },

};

Вот как я пытался загрузить свое изображение: 

import hiker from './hiker.png';
<img src={hiker} />

Любая помощь будет принята с благодарностью, спасибо.

1 Ответ

1 голос
/ 23 апреля 2019

Несколько вопросов здесь.Во-первых, вы используете babel-node, который указывает на index.js.Если вы хотите, чтобы он указывал на конфигурацию вашего веб-пакета, вам нужно удалить index.js из package.json dev scripts: 

"dev": "nodemon --exec babel-node",

и переименовать webpack.config.js в babel.config.js.

К сожалению, для того, чтобы ваш проект заработал, требуется еще немного работы.Похоже, что эта настройка использует некоторую конфигурацию server-side-rendering.По общему признанию, я никогда не использовал koa, поэтому я не могу здесь сильно помочь.

Он также выглядит немного устаревшим, и кто-то обновил его и включил в себя пошаговое руководство .

Тем не менее, я бы порекомендовал вам ориентироваться на ориентированный на новых разработчиков шаблон, если вы только учитесь.

Я бы посоветовал начать с create-Reaction-app , который скрывает большую часть этой конфигурации веб-пакета.

Или вы можете загрузить мой реаги-стартовый набор , который имеет открытую конфигурацию веб-пакетов, с которой можно поиграться (при желании) и использует webpack-dev-server для разработки и webpack с очень простой express конфигурацией для производства.

До вас.

Удачи!

...