프론트엔드 개발환경의 이해 : Webpack에서 바벨 사용하기

이때까지 바벨을 어떻게 설정하고 사용하는지 알아봤다

하지만 실무환경에서는 바벨을 따로 빼어 쓰지않고 웹팩과 통합해서 사용하는 일이 많다

Webpack in Babel

바벨은 웹팩에서 로더 형태로 제공된다 다운로드 받자 npm i babel-loader

이제 다시 webpack.config.js에서 로더에 대한 설정을 해주어야하는데

modules에 가서 babel-loader를 추가해주자

    ...
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            }
    ...

바벨은 자바스크립트를 변환하는 일을 하기 때문에 .js 확장자인 파일에만 적용하게끔 정규표현식을 설정했고

밑의 exclude 옵션은 제외할 경로를 명시해주는 것인데 node_modules에 있는 패키지들은 빌드할 필요가 없으니 제외시켜주자