[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(4) - 웹팩과 바벨 동시 사용 시 트랜스파일링 변환 오류

이전 글 [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정

에서 바벨 설정 후 웹팩 빌드를 하였는데, 이상하게 IE에서 오류가 발생해 작동을 안하는 현상이 발생하였다.

 

오류가 나는 js 파일

화살표 함수가 그대로 존재하기 때문에 에러가 발생한것인데, babel 설정에 target을 줘도 문제가 해결되지않았다.

 

도대체 왜 이런것일까...? 이것때문에 몇시간을 소비했는지 모르겠다.

찾아보니까 웹팩에 문제가 있었더라

 

Webpack v5 부터 트랜스파일을 기본적으로 es6로 한다고 한다.

버전이 올라가면서 변경될것인지 아니면 계속 이상태로 갈것인지는 알 수 없으나, 일단 변경을 해주는게 맞다 싶다.

 

그래서 webpack.config.js 파일에서 target 설정을 줄 수 있는데,

https://webpack.js.org/configuration/target/

Target | webpack

 

웹팩 웹사이트에 들어가보면 es5 기능을 사용하도록 명시해 줄 수 있다.

 

그래서 최종적으로 webpack.config.js 설정을 다음과 같이 해주면 된다.

const path = require('path');

module.exports = {
    mode: "development", // "production" || "development" || "none"
    entry : "./src/index.js",
    output : { 
        path : path.resolve(__dirname, "bundleBuild"),
        filename : 'build.js'
    },
    target : ['web', 'es5'],
    module: {
        rules: [
            {
                test : /\.js$/,
                exclude: /node_modules/,
                use : "babel-loader"
            },
            {
                test : /\.css$/,
                use : ["style-loader", "css-loader"]
            }            
        ],
    },
}

target 에 ['web', 'es5']를 설정해두면 IE에서도 정상적으로 작동하는것을 볼 수 있다.

아주 깔끔하게 작동

 

* ps : 추가적으로 es5로 명시해두면 뭔가 다른게 작동을 안할수도 있으니 꼭 확인이 필요하다. 아주 귀찮은 녀석이다...

---

참고 : https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11

To v5 from v4 | webpack

참고 : https://stackoverflow.com/questions/64339314/webpack-babel-transpile-object-arrow-functions-doesnt-work/64395200#64395200

webpack + babel - transpile object arrow functions doesn't work