webpackで終わる.jsxを前提とするES6のインポートステートメント

Question

webpackにbrowserfiyを使用していた既存のプロジェクトを移植しています。以前は次のような文をインポートしました：

import MyClass from './MyClass' 

...となります。今、私は.jsxの延長に

import MyClass from './MyClass.jsx' 

を追加する必要があります。ここに私のローダの定義です：

var path = require("path"); 

module.exports = { 
    devServer: { 
    inline: true, 
    port: 10000 // Defaults to 8080 
    }, 
    entry: { 
    app: ['./src/app.jsx'] 
    }, 
    output: { 
    path: path.resolve(__dirname, "public/scripts"), 
    publicPath: '/scripts', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loader: "style!css" 
     }, 
     { 
     test: /\.sass$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: [ 
      "es2015", 
      "stage-0", 
      "react" 
      ], 
      plugins: [ 
      "transform-flow-strip-types" 
      ] 
     } 
     } 
    ] 
    } 
}; 

延長せずにロードするためのWebPACKを説得する方法任意のアイデアは？

Answer 1

Webpackは、resolve.extensionsの設定を使用して、モジュールの解像度を決定する際に考慮する拡張子を認識します。デフォルトは["", ".webpack.js", ".web.js", ".js"]なので、.jsxの拡張子を手動で追加する必要があります。

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