无法导入.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' 
};