TIL_200930(webpack)

 

왜 webpack을 사용해야 하는가?

webpack은 Javascript Bundling Tool입니다. 즉, 자바스크립트 소스들을 하나로 묶는 도구입니다. 

 

1. Entry 설정을 통한 Javascript 리소스 모듈화

2. CommonsChunkPlugin 자동생성

3. npm으로 Javascript 리소스 일원화

4. Loader를 활용한 Node.js 도구의 활용

5. Webpack Configuration으로 간편한 로컬/테스트/리얼 환경별 빌드 관리

6. Webpack-dev-server 활용한 개발 편의성 증대

 

라는 장점이 있다고 하는데 아직은 잘 모르겠네요.

일단 공식문서를 읽어보며 천천히 알아가야겠습니다.

 

webpack의 6가지 핵심 개념이 있습니다.

1. Entry

2. Output

3. Loader

4. Plugins

5. Mode

6. Browser Compatibility

 

Entry

내부 dependency graph를 빌드하기 위해 어떤 모듈을 사용해야하는지 알려줍니다. Entry point가 의존하는 다른 모듈과 라이브러리를 파악합니다. 기본은 ./src/index.js  이지만, webpack 구성에서 entry 속성을 설정하여 변경할 수 있습니다.

 

webpack.config.js

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

 

 

Output

output 속성은 webpack에서 생성하는 번들을 내보내는 위치와 파일 이름을 지정합니다. 

기본 출력 파일은  ./dist/main.js  이고,  ./dist  폴더에 다른 파일들이 생성됩니다.

 

webpack.config.js

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

위의 예를 보면 output.filename과 output.path 속성에서 webpack이 내보낼 번들의 위치와 이름을 정하고 있습니다. 

 

 

Loaders

webpack은 Javascript와 JSON 파일만 이해합니다. Loader는 webpack이 다른 유형의 파일을 처리할 수 있도록 하고, 프로그램에 사용하거나 dependency 그래프에 추가할 수 있는 모듈로 바꿉니다.

 

Loader는 webpack 설정에서 두가지 속성을 가집니다.

1. test 속성은 변환할 파일을 식별합니다.

2. use 속성은 변환되는데 사용되는 Loader를 나타냅니다.

 

wabpack.config.js

const path = require('path');

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

test와 use 속성은 webpack의 컴파일러에게 다음과 같은 것을 알려줍니다. require()/import 문 안에서 '.txt' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용하여 변환합니다.

 

webpack에서 규칙을 정의 할 때, rules가 아니라 module.rules에서 합니다. 만약에 지키지 않았다면 webpack이 알려줄 것입니다.

정규식을 사용하여 파일을 일치시킬때 주의해야 할 것이 있습니다.  /\.txt$/ 는 '/\.txt$/' 또는 "/\.txt$/" 와 다릅니다. 전자는 webpack에 .txt로 끝나는 모든 파일과 일치하도록 지시하고 후자는 webpack에 절대경로 '.txt'를 가진 단일 파일과 일치하도록 지시합니다.