3. (3)웹팩설정 @babel/preset-env / plugins

웹팩설정파일(webpack.config.js)에서

 

presets

플러그인들의 모음 (안에는 수십개의 플러그인들)

 

preset-env 가 옛날브라우저 지원해주는 플러그인인데

ie를 안쓰면 크롬만 설정하도록 preset-env에 세부설정을 해주는것

 

module: {
        rules:[{
            test: /\.jsx?/,   
            loader: 'babel-loader',   
            options:{   
                presets:[ ['@babel/preset-env' , { 여기에 } ] , '@babel/preset-react'],
            }
        }]
    },

 

타겟을 '한국에서 점유율이 5%이상인 브라우저만' 지원하겠다

이렇게 설정이 가능

    module: {
        rules:[{
            test: /\.jsx?/,   
            loader: 'babel-loader',   
            options:{   
                presets:[ 
                    ['@babel/preset-env',{ targets:{ browsers: '> 5% in KR' } } ],
                    '@babel/preset-react'],
                plugins:[],  //여기도플러그인이있다
            }
        }]
    },

 

browserslist 의 다양한 옵션들

https://github.com/browserslist/browserslist

 

 

 

Plugins

const webpack = require('webpack');

module.exports = {
  plugins:[
  	new webpack.LoaderOptionsPlugin({ debug: true }),
  ], // 여기플러그인 설명임
  output:{ 
  },
}

이런식으로 플러그인을 적용한다

(LoderOptionsPlugin은 loader는module을뜻하고 moduel 의 options에 { //값 } 의 값들 각각 다 넣어주는 플러그인)

 

 

 

 

 

++

module: {
        rules:[{
            test: /\.jsx?/,   
            loader: 'babel-loader',   
            options:{   
                presets:[ 
                    ['@babel/preset-env',{ targets:{ browsers: ['> 1% in KR'] } , debug:true   } ],
                    '@babel/preset-react'],
            }
        }]
    },

preset-env에 debug:true로 켜서 어떤어떤 브라우저에 적용되는지 확인 가능