Webpack configuration

context

입력 옵션을 해결하기위한 기본 디렉토리 (절대 경로!) 입니다. output.pathinfo가 설정되면 포함 된 pathinfo가 설정해놓은 congtext 디렉토리로 단축됩니다. Default: process.cwd()

entry

번들을 설정하기 위한 진입점 입니다.

String : 문자열이 들어오는 경우 시작시 로드되는 모듈로 해석
Array: 시작시 모든 모듈이 로드됩니다. 마지막 하나가 내보내집니다.

Object: 다중 항목 번들이 작성됩니다. key는 청크되는 파일의 이름입니다. 값은 문자열 또는 배열이 가능합니다.

{
entry: {
	page1: "./page1",
	page2: ["./entry1", "./entry2"]
},
output: {
	// Make sure to use [name] or [id] in output.filename
	//  when using multiple entry points
	filename: "[name].bundle.js",
	chunkFilename: "[id].bundle.js"
}
}

output

파일 번들링에 영향을 주는 옵션입니다. 번들링 옵션은 webpack에 컴파일된 파일을 디스크에 작성하는 방법을 알려줍니다. 다중 진입점이 있을 수 있으나, 디스크 작성에 관련된 경로는 하나의 구성만 지정됩니다.
해싱([hash] 또는 [chunkhash])를 사용하는 경우 모듈에 일관된 순서가 있어야 합니다. 순서를 사용하기 위해 OccurrenceOrderPlugin 또는 recordsPath를 사용해야 합니다.

1) filename
디스크의 작성될 파일 이름을 지정합니다.
해당 옵션에 절대 경로를 지정하면 안됩니다.
output.path 옵션은 팡리이 기록되는 디스크상의 위치를 결정합니다. filename은 개별 파일의 이름을 짓기 위해서만 사용됩니다.

Single entry 경우 예

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js

Multiple 설정일 경우의 예 번들링 구성에 있어 여러개의 진입점이 있거나, CommonsChunkPlugin과 같은 플러그인을 사용할 때 하나 이상의 청크파일이 생성되면 각 파일에 고유한 이름이 생성되는지 확인해봐야 합니다.

[name]은 청크의 이름으로 바뀝니다.
[hash]는 컴파일 해시로 바뀝니다.
[chunkhash]는 청크의 해시로 대체됩니다.

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/app.js, ./build/search.js

2) path

출력 경로는 절대경로(필수) 입니다. [hash]는 컴파일된 해시로 전환됩니다.

3) publicPath

publicPath는 브라우저에서 참조될때 출력 파일의 공용 URL 주소를 지정합니다.

게으른 개발자

webpack 설정 option에 대해서