webpack 개념 6.설정 Configuration

설정 Configuration

웹팩 설정(구성) 파일은 객체로 내보내지는(export) 자바스크립트 파일이다.

Node.js CommonJS 모듈을 통해 다음이 가능 :

• require(...)를 통해 파일 가져오기(import)
• require(...)를 통해 npm 유틸리티 사용
• 자바스크립트 표현식 사용 가능 (예. ? : 연산자)
• 자주 사용하는 값을 상수 혹은 변수로 선언 가능
• 구성의 일부를 생성하기 위해 함수를 작성하고 실행 가능

기술적으로는 가능하지만 피해야 할 것들 :

• 웹팩 CLI를 사용할때 CLI 인수에 접근 (대신 사용자 정의 CLI를 만들거나, --env 사용)
• 비결정적인 값 내보내기 (웹팩을 두번 실행해도 동일한 출력파일이 생성되어야 함)
• 긴 구성 파일 작성 (대신 여러 파일로 나눌것)

이 문서를 떠나 가장 중요한것은, 웹팩을 구성하는 방법에는 여러가지 방법이 있다는 것이다. 팀과 개인이 이해하고 유지할 수 있도록 일관되게 작성하는 것이 중요하다.

간단한 구성

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

여러개로 구성

Exporting multiple configurations

다른 구성 언어로 사용

웹팩은 여러 프로그래밍 및 데이터 언어로 작성된 구성 파일을 허용한다.

Configuration Languages

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement