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

当我这样写 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']
      }
    }]
  }
};

And in index.jsx我导入一个react module App

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

import App from './containers/App';

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

我发现我是否将模块应用程序命名为App.jsx，然后 webpack 会说index.jsx找不到模块App，但是如果我在中命名命名模块应用程序App.js，它会找到这个模块并运行良好。

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

Webpack 不知道如何解析.jsx隐式文件。您可以在应用程序中指定文件扩展名（import App from './containers/App.jsx';）。您当前的加载器测试表明，当您显式导入具有 jsx 扩展名的文件时，要使用 babel 加载器。

或者，您可以包括.jsx在 webpack 应该解析的扩展中，无需显式声明：

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

对于 Webpack 2，请保留空扩展名。

resolve: {
  extensions: ['.js', '.jsx']
}