[JS Bundler][Ch1][Webpack] entry, output

webpack 기본적인 구성옵션 선언(webpack.config.js)

entry

• 파일을 읽어들이기 시작하는 진입점을 설정하는 옵션
• webpack은 html이 아닌 JavaScript를 진입점으로 사용
• 여러 개의 진입점도 설정할 수 있다.
• https://webpack.js.org/configuration/entry-context/#entry 참고

entry: './js/main.js'

output

• entry를 통해서 읽어들인 파일의 기본적인 연결관계를 webpack이 분석해서 결과물(번들)을 반환하는 설정
  • path : 어느 경로에 반환할 것인지(NodeJs에서 필요로하는 절대 경로 표기)
    • NodeJs에서 필요로하는 절대 경로를 표기하기 위해 path 전역 모듈 사용
    • require('path') : NodeJs에서 제공하는 전역 모듈
    • path.resolve(인수1, 인수2) : 인수1과 인수2를 합쳐주는 기능
    • __dirname : NodeJs에서 제공하는 전역 변수 => 현재 파일의 경로를 지칭(webpack.config.js의 경로)
  • filename : 결과물 파일의 이름
  • clean: true => 기존에 반환한 파일 제거
• https://webpack.js.org/configuration/output/ 참고

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
}

 path, filename을 생략하고 build 시, 자동적으로 dist 폴더에 entry 옵션과 같은 이름으로 파일을 반환해준다.

 output: {
    clean: true
  }

webpack.config.js

// 여기에 webpack의 기본적인 구성옵션 선언

// require('path') : NodeJs에서 제공하는 전역 모듈
// path.resolve(인수1, 인수2) : 인수1과 인수2를 합쳐주는 기능
// __dirname : NodeJs에서 제공하는 전역 변수 => 현재 파일의 경로를 지칭
const path =  require('path');

module.exports = {
  /* entry
  * 파일을 읽어들이기 시작하는 진입점을 설정하는 옵션
  * webpack은 html이 아닌 JavaScript를 진입점으로 사용
  */
  entry: './js/main.js',
  /* output
  * entry를 통해서 읽어들인 파일의 기본적인 연결관계를 webpack이 분석해서 결과물(번들)을 반환하는 설정
  * path : 어느 경로에 반환할 것인지(NodeJs에서 필요로하는 절대 경로 표기)
  * filename : 결과물 파일의 이름
  * clean: true => 기존 만들은 파일 제거
  */    
  output: {
    /* path: path.resolve(__dirname, 'dist'),
    filename: 'main.js', */
    // path, filename을 생략하면 자동적으로 dist 폴더에 entry 옵션과 같은 이름으로 파일을 반환해준다.  
    clean: true
  }
}