react为什么使用js正常，使用jsx报错？

Question

当我是用js的时候一切正常，但当我改为jsx的时候报错，里面的代码一样，都是用jsx语法写的，求解为什么？

下面是webpack.config.js

const path=require('path');
const {ESLINT_ENABLE}=require('./config');

module.exports=function (env={}, argv){
  let config=null;
  if(env.dev){
    config=require('./config/dev');
  }else if(env.prod){
    config=require('./config/prod');
  }else{
    config=require('./config/test');
  }

  return {
    //公共的
    entry: './src/index',
    module: {
      rules: [
        //js/jsx 
        {test: /\.jsx?$/i, exclude: /node_modules/, use: [
          //babel
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          },
          //eslint
          /*...[
            {
              loader: 'eslint-loader',
              options: {
                outputReport: {
                  filePath: 'eslint.html',
                  formatter: require('eslint/lib/formatters/html')
                }
              }
            }
          ]*/
        ]},
        //css
        {test: /\.css$/i, use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ]
          }
        }]},
        //图片
        {test: /\.(png|jpg|gif)$/i, use: {
          loader: 'url-loader',
          options: {
            outputPath: 'imgs/',
            limit: 10*1024
          }
        }},
        //字体
        {test: /\.(eot|svg|ttf|woff|woff2)$/i, use: {
          loader: 'url-loader',
          options: {
            outputPath: 'fonts/',
            limit: 10*1024
          }
        }},
        //less
        {test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},
      ]
    }
  };
};

Answer 1

不加后缀自动解析默认的扩展名里好像没有jsx，自己配置下resolve.extensions，或者带上扩展名

Answer 2

你改成了jsx文件名，在其它地方引入的时候就是food.jsx,根据提示的错误意思就是找不到food.js文件。