如果名为jsx的文件，webpack找不到模块

JimHarry2020-03-12

当我这样写webpack.config.js时

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

在index.jsx我导入一个react模块App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现是否在中命名了模块app App.jsx，然后webpack会在index.jsx中找不到模块App，但是如果我在中命名了模块app App.js，它将找到该模块并且运行良好。

所以，我对此感到困惑。在我的中webpack.config.js，我写test: /\.jsx?$/了检查文件，但是为什么*.jsx找不到命名的文件？

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