Webpack, 그리고 CRA

i_sy_code·2022년 6월 12일

🔦 웹팩 (Webpack)

웹팩이란, 자바스크립트의 모듈 번들러 라이브러리이다. 여러개로 나눠진 파일을 하나의 번들로 모듈화하여 압축 및 최적화할 수 있다. 웹팩이 필요해진 이유는 웹의 규모가 커짐에 따라 파일간 관계가 복잡하고 무거워져 브라우저 로딩 시간이 길어졌기 때문이다. 따라서 웹팩을 통해 파일간 의존성 관계 정리 및 최적화를 하게 된다.

웹팩은 다음과 같은 장점을 갖는다.
1. 진입 시점에 코드 전체를 로드해 놓을 수 있어 이 후 로딩 속도를 줄일 수 있음
2. 브라우저의 HTTP 요청 제약을 피할 수 있음 (한 번에 보낼 수 있는 HTTP 요청 수 : 6~8개)
3. 모듈 단위로 개발 가능 => 가독성과 유지보수성 향상
4. 최신 JS 문법을 지원하지 않는 브라우저에서도 사용할 수 있도록 코드 변환

다만, 하나의 파일로 모듈화된 웹팩을 사용하게 되면 첫 로딩 속도가 느려질 수 있다.
이를 해결하고자 웹팩에선 캐시나 코드 스플릿 같은 개념을 도입하여 문제를 해결하고 있다고 한다.
🧷 코드 스플릿

🔦 웹팩의 구성요소

module.exports = {
  entry : './src/index/js',
  output : {
     path : path.resolve(_dirname, 'dist'),
     filename : 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /(node_modules|bower_components)/
    }, {
      test: /\.css$/,
      loaders: ['style', 'css?sourceMap', 'postcss-loader']
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css?sourceMap', 'sass?sourceMap', 'postcss-loader']
    }]
  }
  plugins: [
     new HtmlWebpackPlugin({template: './src/index/html'})
  ],
  mode : {
    'production'
  }
}

1. Entry

웹팩이 빌드할 파일의 시작 위치
디폴트 값 : ./src/index.js

2. Output

웹팩에 의해 생성된 번들을 내보낼 위치와 이름 지정
디폴트값 : ./dist/main.js

3. Loaders

JS가 아닌 파일들도 유효한 모듈로 변환시켜줌
rules 프로퍼티를 정의해야 하며 그 안에 text와 use를 필수 프로퍼티로 가진다.
test : 변환해야 할 파일 식별화
use : 변환될 파일에 대해 필요한 로더를 명세

4. Plugins

번들화된 JS를 난독화하거나 특정 텍스트를 추출
번들된 css, js 파일들을 html 파일에 주입(html-webpack-plugin 사용)하는 역할

5. Mode

웹팩 설정 모드로써 3가지의 파라미터 중 하나를 택할 수 있다.
production : 최적화 빌드
development : 빠른 빌드
none : 아무 기능 없이 빌드

🔦 CRA 속 Webpack

자, 이제 웹팩에 대해서는 알게되었는데 어라 나는 웹팩 라이브러리를 써본 기억이 없다.
package-lock.json에 웹팩이 있는 걸 보고, 혹시 node_modules에 포함돼 있던건가? 싶었다.
궁금해서 검색해보니 CRA 설치에 웹팩이 포함된다는 것이었다.
다만, 이 파일은 숨겨져 있기에 다음과 같은 방법으로 볼 수 있다.

npm run eject

해당 명령어를 입력하면 숨겨져있던 config와 scripts 폴더가 생긴다.
(주의 : 한 번 eject를 하면 이 전으로 되돌리지 못함!)

webpack.config.js가 웹팩 설정 파일이고, 이 파일 내부에 웹팩 구성 요소가 담겨있다.
외에도 jest와 babel 설정 파일도 있는 것을 보고 놀랐다.
정말 CRA는 고마운 존재..인줄 알았으나,

사실 CRA의 문제점은 사용하지 않는 설정이나 라이브러리까지 Overloading되어 있다는 것이다.
따라서 번들이 무거워져 빌드 시간이 길어질 수 있고,
CRA 사용시 웹팩을 커스텀하기 어려워진다는 단점도 갖게 된다.
역시 언젠가는 CRA에게 벗어나야 하는 순간이 올 것 같다.