webpack 진입점 Entry Points

3050 단어 webpack

진입점이란?



모듈 번들러로 번들할 때의 해석의 시작점의 파일.
엔트리 포인트를 기점으로 하고, 그 파일로 import 하고 있는 모듈을 차례로 추적해 간다.

단일 진입점 => 단일 대상


entry 속성을 지정하지 않으면 기본적으로 ./src/index.js 파일을 봅니다.
=> 진입 점이 ./src/index.js이면 entry 속성을 생략 할 수 있습니다.

파일명이나 패스가 다른 경우는 entry 프로퍼티로, webpack.config.js 파일로부터의 상대 패스를 이하와 같이 캐릭터 라인으로 지정할 수가 있다.

webpack.config.js
module.exports = {
  entry: './src/hoge.js'
};

상기는 이하의 단축계. 엔트리 포인트가 하나라면 상기로 충분하다.

webpack.config.js
module.exports = {
  entry: {
    main: './src/hoge.js'
  }
};

출력처의 파일명을 바꾸고 싶은 경우는 main 를 그 파일명으로 한다.

여러 진입 점 => 단일 대상



엔트리 포인트가 복수 있는 경우는, 이하와 같이 배열로 건네주면 번들 파일을 1개에 정리할 수 있다

webpack.config.js
module.exports = {
  entry: ['./src/hoge.js', './src/fuga.js']
};

실행하면 dist/main.js 에 정리하고 있다.

여러 진입 점 => 여러 대상



엔트리 포인트가 복수 있고 번들 파일도 각각 나누고 싶은 경우는, 이하와 같이 기술한다.

webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};

번들하면 다음과 같다.



이쪽도 마찬가지로 배열로 건네주는 것이 가능.

좋은 웹페이지 즐겨찾기