바벨을 사용하여 .js 대신 .jsx 파일 컴파일

Question

ReactJs을 배우기 시작했으며 this "builder"을 사용하여 처음부터 환경을 구축하려고했습니다.

모든 꽤 잘 작동하지만, 내가 .jsx 파일 대신 .js 작업을하고 싶습니다 (다른 텍스트 편집기 나사를, 및 IR하지 컴파일 된 스크립트의 다른 확장자를 사용하여 더 나은 느낌)

그러나, 나는 .jsx 파일을 컴파일 할 수 없었고, 파일은 .js에서만 작동합니다.

{ 
    "presets":["es2015","react"] 
} 

그리고 내 webpack.config.js을 :

이

는 .babelrc에 대한 구성 파일입니다

var path = require('path'); 

var config = { 
    context: path.join(__dirname,'src'), 
    entry:[ 
     './main.js' 
    ], 
    output:{ 
     path :path.join(__dirname,'www'), 
     filename:'bundle.js' 
    }, 
    module:{ 
     loaders:[ 
      { 
       test: /\.js$/, 
       exclude:/node_modules/, 
       loaders:['babel'] 
      } 
     ], 
    }, 
    resolveLoader:{ 
     root: [ 
      path.join(__dirname,'node_modules') 
     ] 
    }, 
    resolve:{ 
     root:[ 
      path.join(__dirname,'node_modules') 
     ] 
    } 
}; 

module.exports = config; 

나는 단순히 jsx에 js에서 웹팩 설정 파일의 확장자를 변경하지만, 아무 소용하려 . 아이디어가 있으십니까? 그것은 .jsx 파일, 대신.js 파일에 바벨 로더를 실행

test: /\.jsx$/, 

:

test: /\.js$/, 

과 :

Answer 1

그냥이 줄을 교체합니다.

당신이 모두.js 및 .jsx, 당신은 정규식에서 ?가 선행 문자의 0 또는 1 발생에 맞게 표시 /\.jsx?$/,로 설정할 수 있습니다 transpile하려면 다음 테스트 .js 및 .jsx 모두 긍정적.

.test 속성은 loader 키에 지정된 로더를 실행하기 위해 충족되어야하는 조건을 나타냅니다. module.loader 옵션 here에 대해 자세히 알아볼 수 있습니다. 모듈을 가져올 때

또한,이처럼 .jsx 확장자를 추가해야합니다

이

import Counter from './Counter.jsx'; 

또는 .jsx 확장을 추가로 설정 웹팩의 resolve.extensions 설정 (기본적으로, 그것의 .js 파일 만 보인다). 이처럼 :

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

이 방법, 당신은 확장자가없는 파일을 가져올 수 있습니다

이

import Counter from './Counter';