Home

오늘의 기억

[Webpack] webpack.config.js 파일 설명


webpack을 이용해서 개발할 때 webpack.config.js 파일이라는 설정 파일을 만들어서 개발한다.

webpack.config.js 파일의 설정 값들을 설명한다.

webpack 4 버전 기준으로 작성되었으며, 필요시 계속해서 업데이트 예정이다.

아래 내용은 모두 webpack 공식 홈페이지의 Configuration 에서 발췌하여 작성되었다.


선언부

const webpack = require('webpack');
const path = require('path');

webpack 모듈과 Node.js 의 내장 모듈인 path 모듈을 import 하여 사용하겠다는 의미이다.

파일 내에서 각각 객체를 사용하는 경우에만 입력해서 쓰면된다.

만약 사용하지 않는다면 꼭 import 할 필요는 없다.


context

module.exports = {
  // ...
  context: path.resolve(__dirname, 'front')
};

모듈 파일들이 위치하는 가장 기본이 되는 디렉토리를 설정한다. 설정하지 않을시엔 기본 값으로 현재 디렉토리로 인식한다.


entry

module.exports = {
  // ...
  entry: {
    home: './home.js',
  }
}

엔트리 파일 (번들 파일) 을 설정하는 부분이다. Key 값은 엔트리 파일의 이름이 되며, Value 값은 모듈 파일을 입력한다.

Value 값에는 모듈 파일을 뿐만 아니라, 배열로 여러 개의 모듈 파일을 입력해도 된다.


output

output.path

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'webapp/resources')
  }
};

엔트리 파일 (번들 파일) 이 저장되는 디렉토리를 설정한다. [hash] 라는 특정 예약어를 사용하면 엔트리 파일이 변경될 때 마다 해쉬 값을 변경해서 저장한다.

output.filename

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

엔트리 파일 (번들 파일) 이 저장되는 파일 이름을 설정한다. [name], [id], [hash] 등등.. 예약어를 입력할 수 있다.

하나만 설명하면 [name] 예약어는 엔트리 파일의 이름을 뜻한다.

자세한 내용은 공식 홈페이지에서 확인할 수 있다.

output.publicPath

module.exports = {
  // ...
  output: {
    publicPath: '/example/resources'
  }
};

webpack 런타임시 각종 로더(loader) 에서 사용되는 URL 앞에 공통적으로 붙는 경로이다.

예를들어 css 에 background-image: url(/img.png) 처럼 쓰고, css-loader, url-loader 를 사용하면 background-image: url(/example/resources/img.png) 처럼 변경된다.

자세한 내용은 공식 홈페이지에서 확인할 수 있다.

20180826 Charyum.Park