jsx 파일 import 시 파일명의 확장자의 유무는 무슨 차이인가?

프론트 엔드 개발시 export default ComponentName; 으로 모듈화 하고 가져다 쓰려고 하면 

import ComponentName from '../component'; 

import ComponentName from '../component.jsx';

둘의 차이가 뭐길래 .jsx는 모듈을 찾을 수 없다 하는 것인가? ( js 확장자는 되는데??)

 

https://stackoverflow.com/questions/34678314/webpack-cant-find-module-if-file-named-jsx

webpack can't find module if file named jsx

웹 팩은 .jsx 파일을 암묵적으로 확인할 수 없다고 한다. (원래 그렇다 인것인가...)

하지만 app 파일은 확장자를 지정하여 가져올수 있다고 import App from './containers/App.jsx'

 

현재 로더 테스트에서는 jsx 확장자의 파일을 명시적으로 가져올 때 바벨 로더를 사용하도록 되어있다고 하니 바벨로더를 사용하여 명시적 jsx 파일 import를 사용 하던가 웹 팩이 확인 해야하는 확장자에 .jsx 를 포함시켜 사용하면 된다.

module: {
    rules: [
      { // 바벨로더 
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },

 module.exports = {
       ......
       resolve: {
            extensions: [ '.ts', '.js', '.tsx', '.jsx'],
        }
     }

위와 같이 webpack.config.js 에 바벨로더에 jsx 확장자도 같이 번들 또는 웹 팩이 확인해야 하는 확장에 .jsx를 포함 하여 사용