Операции импорта ES6, которые принимают .jsx, заканчивающиеся на webpack

Question

Я портирую существующий проект, который использовал browserfiy для webpack. Ранее импортные заявления, такие как:

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 необходимо добавить вручную. Просто включите это в корень вашего конфигурационного объекта webpack:

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