웹팩의 4가지 주요 속성 - Output

📌 Output

output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

📌 Output 속성 옵션 형태

최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path속성을 함께 정의한다.

// webpack.config.js
var path = require('path');

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

filename속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path속성은 해당 파일의 경로를 의미한다. 그리고 path속성에서 사용된 path.resolve()코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API이다. __dirname은 NodeJS에서 현재 프로젝트 디렉터리를 의미한다.

이 API가 하는 역할을 좀 더 이해하기 쉽게 표현하면 아래와 같다.

output: './dist/bundle.js'

📌 Output 파일 이름 옵션

filename속성에 여러 가지 옵션을 넣을 수 있다.

1️⃣ 결과 파일 이름에 entry 속성을 포함하는 옵션

module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};

2️⃣ 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션

module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};

3️⃣ 매 빌드시 마다 고유 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

4️⃣ 웹팩의 각 모듈 내용을 기준으로 생생된 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

이렇게 생성된 결과 파일의 이름에는 각각 엔트리 이름, 모듈 아이디, 해시 값 등이 포함된다.