웹팩 (webpack)

개발환경의 발전에 따라 JavaScript로 주기적으로 새로운 기술을 도입하고 있는데요. 증가하는 애플리케이션의 규모에 발맞추기 위해 다른 언어들처럼 module방식의 도입하였습니다. 이는 파일 사이즈의 증가로 이어졌는데요. 이를 효과적으로 관리하기 위해 webpack이 등장하였습니다.

 

webpack은 정적모듈번들러 (static module bundler)인데요. webpack은 모듈 간에 의존관계를 파악하여 의존성 지도 (dependency map)을 생성하고 이를 바탕으로 연관된 모듈들을 그룹화하여 번들의 수를 줄여줍니다.

주요 개념들

Entry

의존성지도를 만들기 위한 시작점으로 기본 경로는 './src/index.js'입니다. 'webpack.config.js' 파일에서 아래와 같이 설정을 통해 경로변경이 가능합니다.

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

Output

생성된 번들들이 배출되는 곳 기본경로는 메인번들의 경우 './dist/main.js'이고 나머지 번들의 경우 './dist'입니다. 마찬가지로 'webpack.config.js' 파일에서 아래와 같이 설정을 통해 경로변경이 가능합니다.

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',
  },
};

Loaders

webpack은  Javascript와 JSON 파일만 읽을 수 있는데요. loaders는 이외 파일들을 webpack일 읽을 수 있는 형태로 변환하는 기능을 합니다.

Plugins

번들러 최적화나 관리를 위해 추가가능한 도구

 

Plugins | webpack

 

Mode

세 가지 옵션 중 하나를 선택하여 해당하는 모드에 최적화시켜 주는데요. 'development', 'production', 'none'의 세 가지 모드가 있습니다.

 

Browser Compatibility (IE8 이하 버전은 제공 안됨)

ECMAScript 5 compatibility table

---

참고

webpack

An intro to Webpack: what it is and how to use it