webpack + babel 구성하기

webpack / babel 구성하기

• 오랜만에 설정하면서 자꾸 잊어먹고 하여 정리를 통해 기억하고자 작성하게 되었습니다.
• 다른 개발자분들이 저의 글로 시간을 아끼시길 바라겠습니다.

npm install dependency

npm i -D @babel/cli @babel/core @babel/preset-env babel-loader webpack webpack-cli

npm i -S core-js

• @babel/polyfill 은 7.4 부터 deprecated 되었습니다.
• 이전에는 preset 설정 시, @babel/preset-env 였으나, 이제는 @babel/env 로 작성하시면 됩니다.

webpack.config.js

const path = require("path");

module.exports = {
    mode : "development",
    entry: ["core-js/stable", "./src/js/test.js"],
    output: {
        // path: path.resolve(__dirname + "/dist"),
        filename: "bundle.js",
    },
    target: ['es5'],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [[
                            "@babel/env",{
                                "useBuiltIns" : "entry",
                                "corejs": 3,
                                "targets" : {
                                    "browsers": ["last 3 versions", "ie >= 11"],
                                    "node": "current"
                                }
                            }
                        ]],
                        plugins: []
                    }
                }
            }
        ]
    },
    devtool: 'source-map'
}

• mode : 모드에 따라 번들링 최적화를 진행(development, production)
• entry : 의존성 그래프 시작점, 번들링 시작점
• output : 번들링 결과물 경로 및 이름 지정
• target : 웹팩에서 번들링 결과를 어떤 목표로하는지 설정(web, webworker, es5, es2020, node)
• module : 웹팩에서 사용하는 모듈에 대한 설정(웹팩 로더 설정)
• devtool : 소스맵 생성 관련 설정(source-map, inline-source-map, eval-source-map 등)

target 버전을 이번에 처음 사용해봤는데, 기본 설정은 web 이고 나같은 경우 IE11 에서 동작하는 js 파일을 번들링 했는데 계속 에러가 발생을 하였다. 확인해 보니, webpack bootstraping 함수가 화살표 함수로 되어있는것..!(IE11 은 거의 ES6 지원X) 그래서 찾아보니 해당 속성을 통해서 해결을 할 수가 있었다!

• webpack 에서 바벨 폴리필 적용시, 엔트리 속성에 "core-js/stable" 이걸 추가해주던가 폴리필이 필요한 js 에 import 'core-js/stable'; 추가해주면 됩니다.

useBuiltIns 속성은 폴리필 관련 옵션

• entry : 지원 브라우저에 필요한 폴리필을 자동으로 생성
  (core-js폴리필 중 브라우저에 없는 기능 모두)
• usage : 작성된 코드내에서 트랜스파일링 시 폴리필이 필요한 부분만 자동으로 생성

corejs 속성은 7.4 부터 지원되는 속성

• useBuiltIns: usage / useBuiltIns: entry 이 둘중 한가지라도 속성이 지정이 되었을 경우에만 사용이 가능하며, 어떠한 core-js 버전을 사용할지 명시한다.

예제코드