번들링 알아보기#

웹팩 : 엔트리#

엔트리는 뭐냐. 웹팩이 내부의 의존성 그래프를 생성하기 위해 사용해야 하는 모듈이다. 웹팩은 엔트리 포인트가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.

오..대단해 똑똑한 친구다
기본값은 ./src/index.js이지만 웹팩 설정에서 수정할 수 있다.

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

웹팩 : output#

output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에게 알려준다. 기본 출력 파일은 ./dist/main.js로 생성된 파일들을 ./dist 폴더로 설정된다.
이래서 빌드하면 저 경로로 파일들이 생겼군.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

아웃풋 지정한 예제
근데? 보니까 require, exports 쓰는 거 보니까 그..import export 쓰는 ES6 문법이 아니라 노드에서 쓰는 commonJS 문법을 쓰네. 왜 그러냐면 웹팩은 노드에서 실행되기 때문이다. 웹팩 자체가 노드 기반 도구다.

번들릥 이름을 지정해주고, 저장할 경로도 지정해주었다. 노드에서 쓰는 파일 경로 모듈 path를 가져와서 쓴다.

₩

웹팩 : 로더#

로더는 뭔가
웹팩은 기본적으로 자바스크립트와 json 파일만 이해한다. 로더를 사용하면 웹팩이 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해서 의존성 그래프에 추가한다.

• 운영체제인가 어디에서 로더가 약간 변환기 같은 역할했었던 것 같은데 여기서도 같은 의미로 사용되는 듯

로더는 웹팩 설정에 2가지 속성을 가진다. test와 use 속성 2가지이다.
변환이 필요한 파일을 식별하는 것이 test 속성
변환을 수행하는데 사용되는 로더를 가리키는 use 속성

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

rules 속성을 정의해서 test와 use 속성을 가진 하나의 규칙을 선언했다.
이것은 무슨 말이냐면

• require나 import 문에서 txt 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용해 변환 작업을 수행하라는 것이다.

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

이런 식으로 체인을 처리할 수도 있다. 이 경우 오른쪽부터 실행된다. 즉 scss가 scss 로더로 css 변환되고, css 로더로 js 모듈로 변환되고, 스타일 로더가 이를 DOM에 스타일로 삽입한다.

웹팩은 기본적으로 js와 json만 이해하기 때문에 그 이외의 파일은 로더로 인식시켜주어야 한다.

₩

웹팩 : 플러그인#

위에서 로더는 특정 유형의 모듈을 변환하는데 사용했다. 플로그인을 사용하면 번들을 최적화하거나 에셋 관리, 환경 변수 주입 등의 여러가지 일을 수행할 수 있다.

플러그인은 어떻게 사용?
require를 통해 플러그인을 요청하고 plugins 배열에 추가해야 한다. 플러그인은 new 연산자를 사용해야 한다. 왜냐면 플러그인은 기본적으로 클래스라서 인스터스를 만들어야 사용할 수 있다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

기본 웹팩 동작에서 결과물은 자바스크립트만 나온다. 그러니까 dist/main.js 파일 한 개만 결과적으로 나온다. 이를 html로 만들어주기 위해 예시에서 플러그인을 설정해준 것이다.

플러그인이 빌드된=번들링된 js 파일을 템플릿 위치의 html에 추가 (<script src="main.js"/)해서 html을 완성한다.

₩

웹팩 : 모드#

그 밖에도 모드, 브라우저 호환성이 있다.
모드는 development, production, none 등이 있어서 환경에 따라 설정을 다르게 해줄 수 있다.

var config = {
  entry: './app.js',
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};
// 실행
// webpack --mode=development 
// webpack --mode=production

실제로 이를 활용해 배포에서는 파일 크기를 최소화하거나, console.log같은 디버그 코드를 자동으로 제거하도록 할 수 있다. 또 변수명을 알아볼 수 없게 바꿔 코드를 보호할 수 있다. 서버 포트번호도 설정할 수 있다. 이를 통해 프록시 설정도 할 수 있다. 트리쉐이킹을 통해 쓰지 않는 코드를 제거하도록도 할 수 있다. 할 수 있는게 많군. API 주소도 설정해줄 수 있음

예시에서의 소스맵을 만들어두면 번들링 되기 전의 원본 코드로 추적할 수 있다. 이를 통해 정확히 어느 코드의 몇번째 줄에서 에러가 발생했는지 디버깅할 수 있다.

₩
브라우저 호환성
웹팩 자체는 ES5 브라우저에서 동작하지만 코드 분할 기능과 같은 동적 import를 쓰려면 Promise가 필요하다. 이를 구형 브라우저에서 쓰려면 폴리필(없는 기능 자스로 만들어서 주기)을 로드해야 한다.

어쩌다보니 번들링만 했다..트리쉐이킹 추가 개념은 다시 정리하자 ㅠ
트리 쉐이킹으로 자바스크립트 페이로드 줄이기