Webpack 이해하기 (8) - 기타 추가 셋업

[1] 디펜던시 추가

yarn add -D @babel/runtime @babel/plugin-transform-runtime

@babel/runtime

• Babel 변환 과정에서 사용되는 런타임 헬퍼(helper) 함수와 core-js의 폴리필(polyfill)을 제공하는 코어 패키지의 일종

@babel/plugin-transform-runtime

• @babel/runtime 패키지가 제공하는 **헬퍼함수와 폴리필(polyfill)**을 재사용할 수 있도록 돕는다.
• babel이 async-await 문법을 지원하도록 돕는다.

*헬퍼 함수: Babel 변환 시 필요한 여러 보조 기능을 제공합니다 (예: 클래스 생성, 스프레드 연산자 확장 등).

*폴리필: 구형 브라우저에서 ES6 이상의 기능(예: Promise, Symbol 등)을 사용할 수 있게 해 주는 폴리필을 포함합니다.

 

[2] .babelrc 파일에 플러그인 설정코드 추가

"plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true // async-await 문법 사용 허용
      }
    ]
  ]

• 위 플러그인은 babel이 ES6+ 문법인 async-await을 지원하도록 한다.

 

[3] 빌드시 자원 복사 관련 디펜던시 추가

yarn add -D copy-webpack-plugin

• webpack을 위한 플러그인으로, 특정 파일이나 디렉토리를 웹팩 빌드 과정 중에 지정된 위치로 복사하는 기능을 수행
• 웹팩이 build 산출물 폴더에 정적 자원을 포함할 수 있도록 돕는다.

 

[4] webpack 설정파일 플러그인 추가

[webpack.common.js]

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "path/to/file.txt",   // 소스 경로와 파일의 형식을 지정
          to: "directory/with/extension.ext", // 이동시킬 목적지와 변환된 형식 지정
          toType: "dir",
        },
      ],
    }),
  ],
};

• source: 복사하려는 디렉토리나 파일 형식
• dest: 이동시킬 목적지 디렉토리나 변환된 파일 형식

[기타]

yarn add -D webpack-bundle-analyzer 

번들, 모듈의 사이즈를 시각적으로 제공해  (큰 파일과 라이브러리 식별, 초기 페이지 로드 속도 개선을 위한 도구)


Reference

https://babeljs.io/docs/babel-runtime

https://www.youtube.com/watch?v=q-s7Frzf1fM