3. (2)babel

바벨 설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

바벨 기본기능 , 브라우저에서 옛날문법 바꿔주는애 , jsx지원, 바벨 웹팩 연결

 

npm i -D @babel/plugin-proposal-class-properties

state ={ }  문법지원해주는 플러그인

 

 

  //webpack.config.js
  entry:{
        app: ['./client'], 
    },  
    module: {
        rules:[{
            test: /\.jsx?/,  //js ,jsx파일에 어떤룰을 적용하겠다
            loader: 'babel-loader',  //어떤룰? 바벨로더
            options:{  //바벨의 옵션들
                presets:['@babel/preset-env','@babel/preset-react'],
                plugins:['@babel/plugin-proposal-class-properties'],
            }
        }]
    },
    output:{
        path: path.join(__dirname,'dist'),
        filename:'app.js'
    },  

바벨적용하는 웹팩 설정

entry에 파일을 읽고 module을 적용한후 output으로 출력한다는 웹팩 설정

 

 

npm webpack