[解決済み] webpack は jsx という名前のファイルがあると、モジュールを見つけることができません。

質問

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 が見つからないのでしょうか？

どのように解決するのですか？

Webpackが解決できないのは .jsx ファイルを暗黙的に解決することを知りません。アプリ内でファイル拡張子を指定することで ( import App from './containers/App.jsx'; ). 現在のローダーテストでは、拡張子jsxのファイルを明示的にインポートする場合は、バベルローダーを使用するように言っています。

を含めるか、あるいは .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']
}