웹팩의 4가지 주요 속성(entry, output)

Entry

module.exports = {
  entry: "./index.js",
};

entry는 웹팩에서 웹 자원을 변환시키기 위한 최초의 js 파일 경로이다.

디펜던시 그래프(Dependency Graph)

빌드를 하면 이 사진처럼 모듈 간의 의존 관계가 생기는 구조인 디펜던시 그래프가 생긴다.

Entry 포인트가 2개인 경우

entry: {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

entry 포인트는 2개가 될 수 있다. entry 포인트 2개 이상 쓰는 경우는 싱글 페이지 애플리케이션(SPA)보다 서버에서 정보를 내려주는 형태의 멀티 페이지 애플리케이션이 적합하다.

---

Output

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

output 속성은 웹팩을 돌리고 난 후 결과물을 저장한 파일을 의미한다. 

filename은 필수로 입력해야 하고 path는 선택 사항이다.

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'
  }
};

이렇게 파일 이름에 옵션을 넣어주면 빌드를 할 때마다 고유 값을 붙여준다. 원래는 브라우저가 파일들을 캐싱하고 있어서 내용이 바뀐 파일이 bundle.js로 변환되어도 새로고침을 해주지 않아 사용자가 새로고침을 해야 했다. 하지만 해시를 이용하면 내용이 변경되었을 때 자동으로 새로고침이 된다.