@babel/preset-env와 plugins

webpack.config.js파일에 있는 presets에 설정을 적용하고 싶다 그러면 아래와 같이 배열로 해서 원하는 브라우저에만 맞춰서 해줄 수 있다.

 

크롬 버전이 70버전이라 치면언 69와 70버전만 호환이 되게 해준다.

// webpack.config.js

module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                    target: {
                        browsers: ['> 5% in KR', 'last 2 chrome versions'],
                    },
                    debug: true,
                }],
                '@babel/preset-react',
            ],
            plugins: [],
            },
        }],
    },

아래와 같이 한국에서 인터넷 점유율이 5%이상인 브라우저를 호환할 수도 있다.(browserlist github에서 참고해보자.)

browsers: ['> 5% in KR', 'last 2 chrome versions'],

 

webpack.config.js에 plugins도 추가해주는데 확장프로그램이라고 이해하자.

(lodaer부분 즉 options부분에 debug true를 넣어준다고 볼 수 있다.)

plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ],

 

그리고 webpack사이트에서 문서를 참고해보면

entry에다가 시작파일을 넣고

output이 결과가 어떻게 될지 

loaders가 module부분

plugin은 추가적으로 하고싶은 작업이 무엇인지

mode는 development / production 을 뜻한다.

 

webpack documents

npm run dev를 돌렸을 때 에러가 발생했는데 

이 부분을 빼주니 잘 동작한다...(이유는...?)

plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ],

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

https://github.com/browserslist/browserslist

GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a

https://webpack.js.org/concepts/

Concepts | webpack