번들러(Bundler)란?

번들러(Bundler)란?

번들러는 모듈화 된 자바스크립트 파일을 하나로 합치는 도구이다. 브라우저는 모듈화 된 자바스크립트를 읽지 못하기 때문에 브라우저가 코드를 읽고 실행하기 위해서는 번들러가 반드시 필요하다.

프레임워크를 사용하게 되면 필수로 번들러를 사용해야 하는데 프레임워크를 쉽게 시작하기 위해 보일러플레이트(boilerPlate) 코드를 사용하곤 하는데 보일러플레이트 안에는 기본적으로 번들러가 내장되어 있다.

npx create-react-app my-project

리액트를 보일러플레이트 코드로 프로젝트를 시작하게 되면 package.json 파일안에 실행 script들이 명시되어 있는데 그 안에 react-scripts 안에 Webpack 이 내장되어 있다.

CRA 프로젝트는 디렉토리를 간결하게 유지하기 위해 웹팩 설정을 숨겨놓는데 설정 파일들을 보기 위해서는 package.json 에 명시되어 있는
npm run eject 를 터미널에 입력하게 되면 숨겨놓은 파일들을 프로젝트 디렉토리에 표시되게 할 수 있다.

번들러의 기능들

• Bundling(묶음): 하나의 번들된 파일을 만들어 배포 & 실행 기능
• Transplie(변환): 브라우저가 이해할 수 없는 확장자(tsx, jsx 등)를 읽을 수 있게 js 파일로 변환
• Dependencies(종속성): node_modules 의 버전과 패키지의 버전이 일하는지 확인 및 관리
• Automatic Bundle Optimization(번들 최적화): 보다 더 작은 번들을 생성하고 로딩속도 향상
  등등..

웹팩(Webpack)

모듈 번들러 중 가장 많이 사용되는 웹팩에 대해서 알아보자

Entry

웹팩을 실행할 대상 파일, 진입점과 경로 정의. 전반적인 구조와 내용이 들어가 있는 메인 js 파일을 지정

entry: {
  app: './src/main.js'
}

Output

결과물의 파일 경로. path와 filename 등을 설정

output: {
  path: path.resolve(__dirname, "dist"),
  filename: '[name].js'
}

Loader

특정 파일을 해석하고 변환하는 작업

• test: 로더를 적용할 파일 확장자(.vue, .jsx)
• use: 로더 이름

참고로 다수의 로더를 적용할 때는 적용법칙이 오른쪽 -> 왼쪽순이다.

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"]
    }
    {
      test: /\.js$/,
      use: {
        loader: "babel-loader"
      }
    },
    {
      test: /\.vue$/,
      use: {
        loader: "vue-loader'
      }
    },
  ]
}

Plugins

추가적인 기능을 설정할 수 있는 옵션

plugins: [
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: "index.html",
    inject: true
  })
]

devtool

성능 최적화를 위해 HTML, CSS, JS 등 파일들을 압축하여 배포하게 되는데 배포 후 에러 발생 시 디버깅이 어려워 빌드파일과 원본 파일을 연결하여 추적할 수 있도록 하는 기능 설정

devtool: "source-map"

마치며

현재 웹 프론트 프레임워크는 용량이 커져 각 상황에 맞는 번들러와 설정이 필요하게 되었다. 화면을 구현하는것뿐만 아니라 번들러에 대한 공부도 지속적으로 필요해 보인다.