無法導入.jsx文件

Question

下面是我的導入代碼： - 從 '../src/components/Employee'

var ReactDOM = require('react-dom'); 
import Header from '../src/components/Header'; 
import MortgageCalculator from '../src/components/MortgageCalculator' 
import Employees from '../src/components/Emp' 
import Employee from '../src/components/Employee' 
class App extends React.Component { 
    render(){ 
     return (

      <div> 
       <Header title="React WbPack"/> 
       <MortgageCalculator principal="200000" years="30" rate="5"/> 

       <Employee/> 
      </div> 

     ); 
    } 
} 

進口員工是我.jsx文件 相同的路線，但錯誤是因爲「無法導入」。什麼可以是 的問題？

我webpack.config.js是： -

module.exports = { 
    entry: './src/app-client.js', 
    output: { 
     path: path.resolve(__dirname, 'build'), 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 
    stats: { 
     colors: true 
    }, 
    devtool: 'source-map' 
} 

Answer 1

如果組件默認的出口嘗試使用 import Employee from '../src/components/Employee.jsx'或使用import { Employee } from '../src/components/Employee.jsx'如果不是默認出口

Answer 2

它開始工作作爲改變我的配置文件爲： -

module.exports = { 
    entry: './src/app-client.js', 
    output: { 
     path: path.resolve(__dirname, 'build'), 
     filename: 'app.bundle.js' 
    }, resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /.jsx?$/, // Match both .js and .jsx 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 
    stats: { 
     colors: true 
    }, 
    devtool: 'source-map' 
};