Ключевое слово реагирует расширяет, не поднимает - PullRequest
Новая
       6

Ключевое слово реагирует расширяет, не поднимает

0 голосов
/ 29 января 2019

Я уже некоторое время пытаюсь изучить веб-пакет, у него, похоже, нет проблем с изображениями или CSS ... просто реагирую, я получаю следующее сообщение об ошибке.Он не распознает это ... Я пытался прочитать и исправить это долгое время, поэтому любая помощь будет очень полезна, помогая другим, когда я не новичок.

На моей странице реакции 

const img = require('./dog.jpeg');
require('./style.css');
import React from 'react';
import ReactDOM from 'react-dom';

class Page extends React.Component () {
  render(){
    return(
      <div>
        <p>A silly complicated way to show an HTML document</p>
      </div>
    );
  }
}

В моем файле webpack.common.js 

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry:{
    app: './src/index.js',

  },
  plugins : [
    new CleanWebpackPlugin(['../dist']),
    new HtmlWebpackPlugin({
      title: 'Web w react, express webpack dev n prod',

    })
  ],
  output : {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  module : {
    rules:[
      // {
      //     test: /\.js$/,
      //     loader: 'babel-loader',
      //     exclude: /node_modules/,
      //     query: {presets: ['es2015']}
      //   },
        {
        test: /\.(jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react']
          }
        }
      },
        // {
        //   test: /\.jsx$/,
        //   loader:'babel-loader',
        //   query: {presets: ['es2015', 'react']}
        // },
      {
        test:/\.(css|scss)$/,
        use:['style-loader', 'css-loader','sass-loader']
      },
      {
        test: /\.(png|jpeg|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: 'file-loader'
            }
          }
        ]
}
    ]
  }
}

появляется сообщение об ошибке Весь код находится по этой ссылке Ссылка на это вGithub

1 Ответ

0 голосов
/ 29 января 2019

Посмотрите правила загрузки вашего модуля.Единственное из этих правил, которое удаленно загружает файлы js, здесь: 

  {
    test: /\.(jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/react']
      }
    }
  },

, теперь посмотрите на test: /\.(jsx)$/.Это позволяет веб-пакету знать, какие файлы загружать с заданной конфигурацией, определенной в объекте.Файл, который вы упомянули с ошибкой, является .js файлом.Если вы хотите, чтобы он загружался с той же конфигурацией, вам нужно изменить test на test: /\.(js|jsx)$/,.Так это должно выглядеть следующим образом. 

  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/react']
      }
    }
  },

Я не слишком углублялся в это ... так что, пожалуйста, lmk, если это решит вашу проблему.удачи!

...