React和Webpack中的“您可能需要合适的加载器”

Question

我一直在尝试将react js与webpack一起使用，但是当执行“ npm run build”时，我得到以下信息：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import ReactDOM from 'react-dom';
| const Index = () => {
>   return <div>Welcome to React!</div>;
| };
| ReactDOM.render(<Index />, document.getElementById('app'));
 @ multi ./src/index.js ./src/scss/main.scss main[0]

我不知道会发生什么，如果文本出来，当我使用“ npm start”启动应用程序时。 然后，我离开我的webpack配置文件和.babelrc。

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      }

    ]
  },

我的代码反应：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
  return <div>Welcome to React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('app'));

Answer 1

通过聊天，您可以在webpack.config.js ：

module.exports = {
//...
// cargadores, los que transpilan tal formato en otro aceptable por los navegadores
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      }
    ]
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [production ? MiniCSSExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',
              publicPath: '../'
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              outputPath: '../'
            }
          }
        ]
      },
    ]
  }
};
//...

您有重复的module字段，应将它们合并为

module.exports = {
// cargadores, los que transpilan tal formato en otro aceptable por los navegadores
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [production ? MiniCSSExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',
              publicPath: '../'
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              outputPath: '../'
            }
          }
        ]
      },
    ]
  }
};

Answer 2

我不知道您的babel配置文件是什么样子，但是，您可能应该尝试以下操作：

webpack.config.js

module: {
  rules: [
    {
      test: /\.jsx$|\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env", "@babel/preset-react"]
      }
    }
  ]
}

.babelrc

{
  "presets": ["@babel/env", "@babel/react"]
}

这应该工作正常。