webpack output 속성

output 속성이란?

번들 파일의 경로와 이름을 설정합니다.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

// ./dist/main.jsが生成される

__dirname ⋯ 프로젝트 루트 디렉토리의 절대 경로 문자열을 포함하는 특수 변수.
path ⋯Node.js 모듈에서 기본적으로 사용할 수 있습니다.
이것은 첫 번째 인수와 두 번째 인수의 경로 문자열을 연결하여 새 경로를 만듭니다.
지정하는 경로가 OS에 따라 다른 것을 방지하기 위해서 사용한다./hoge/dist 와 같이 전개된다. 참고
( path: `${__dirname}/dist` 이렇게 지정해도 좋다)

path 속성 생략

path 속성을 생략할 수도 있습니다.
=> 프로젝트의 루트 디렉토리 바로 아래 dist 디렉토리 아래에 생성됩니다.

webpack.config.js

module.exports = {
  output: {
    filename: 'foo.js'
  }
};

// ./dist/foo.jsが生成される

여러 엔트리 포인트를 각각 출력하려는 ​​경우

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  }
};

// ./dist/foo.jsと./dist/bar.jsが生成される

[name] 플레이스홀더에는 entry 의 키가 각각 들어간다.
(이 경우 output 속성을 생략해도 결과는 변경되지 않음)

그 외에는 이하와 같은 플레이스홀더가 있다.

[id] ⋯ entry 객체 내의 인덱스 값

[hash] ⋯ 번들 전체에서 생성 된 해시 값

[chunkhash] ⋯ 각 엔트리 포인트에 대해 생성 된 해시 값

more

즉, 이러한 설정 파일

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    foo: "./src/bar.js",
    baz: "./src/qux.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[id]-[name]-[hash].js"
  }
};

이와 같이 출력된다.


[hash]와 [chunkhash]는 동시에 사용할 수 없습니다.