React 和 Webpack 中的“你可能需要一个合适的加载器”答案

【问题标题】："You may need an appropriate loader" in React and WebpackReact 和 Webpack 中的“你可能需要一个合适的加载器”
【发布时间】：2019-10-16 00:55:15
【问题描述】：

我一直在尝试将 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'));

【问题讨论】：

试试use: [ { loader: "babel-loader" } ]。
我用它........
stackoverflow.com/questions/33469929/…
我已经尝试了所有解决问题的方法，但没有一个有效。
请添加你的 .babelrc 文件。

标签： node.js reactjs webpack

【解决方案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: '../'
            }
          }
        ]
      },
    ]
  }
};

【讨论】：

【解决方案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"]
}

这应该可以正常工作。

【讨论】：