Bundler[Webpack] - entry & output

01.webpack.config.js

• webpack.config.js 파일에서 기본적인 구성 옵션을 추가할 수 있습니다.
• 브라우저에서는 import, export와 같이 데이터 가져오기와 내보내기가 사용됩니다.
• webpack.config.js 파일은 브라우저가 아닌 node.js 환경에서 동작하므로 다른 명령어가 사용 됩니다.

webpack 참고 사이트

• webpack 사이트 바로가기

02.export (entry & output)

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    filename: "app.js"
  }
}

entry

• webpack 번들러가 동작할 때 어디에서부터 어디에서부터 읽어들이기 시작하면 되는지에 대한 파일을 지정하는 키워드입니다.
• entry는 하나의 진입점이 아닌 여러 진입점을 설정해줄 수도 있습니다.

output

• entry를 통해 읽어들인 파일에 기본적인 연결 관계를 webpack이 분석하여 결과를 내어주는 기본적인 구성을 작성할 수 있습니다.
• 이 옵션에는 객체 데이터를 통해 대표적인 옵션인 path와 filename을 추가할 수 있습니다.
• path는 webpack을 동작시킬 때 어떠한 경로에 결과물을 만들어서 내어줄건지 명시할 수 있습니다.
• filename은 entry에서 읽어들인 파일명과 동일하게 지정해줄 수 있습니다.
• 한 가지 주의해야할 점은 path 옵션은 node.js에서 필요로 하는 절대 경로를 명시해줘야 합니다.

03.import

path 모듈 가져오기

// import
const path = require("path")

• path 옵션은 node.js에서 필요로 하는 절대 경로를 명시해줘야 하는데 이를 쉽게 하기 위해 node.js에서 제공하는 전역 모듈인 path를 가져오도록 합니다.

path 옵션 명시하기

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    filename: "app.js"
  }
}

• path라는 전역 모듈을 가져오고 이에 resolve()라는 메소드를 실행합니다.
• resolve(): 해당 메소드는 첫 번째와 두 번째 인수의 경로를 합쳐주는 역할을 수행합니다.
• __dirname: node.js의 전역 변수로 현재 파일이 있는 그 경로를 지칭합니다.
• 두번째 인수: dist라는 파일의 경로를 합쳐서 절대 경로를 output의 path 옵션에 반환 합니다.
• build를 하면 dist이름의 폴더 안에 app.js 파일을 자동 생성 해줍니다.

04.build

$ npm run build

• build라는 제품 모드인 터미널 명령을 통해 프로젝트 폴더에 dist 폴더가 생겼으며 dist이름의 폴더 안에 app.js 파일을 자동 생성 해줍니다.

05.clean 옵션 (true 설정)

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    filename: "main.js",
    clean: true
  }
}

• filename 속성에서 해당 경로에 파일명이 다른 main.js를 설치하게 되면 기존에 있던 app.js가 그대로 있는 상태에서 추가적으로 main.js가 생성 됩니다.
  이를 해결하기 위해서는 clean이라는 옵션에 true 값을 주어 전에 설치한 app.js파일을 제거하는 것이 가능합니다.
• app.js파일은 자동 삭제되고 main.js파일만 생성 됩니다.

06.path 옵션 생략

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    clean: true
  }
}

• 위와 같이 output의 path, filename을 삭제하고 $npm run build를 진행해도 실제로는 dist 폴더와 그 안에 main.js이 함께 생성됩니다.
• 이는 webpack 번들러가 기본값으로 결과물을 dist 폴더에 entry에 입력한 동일한 파일명으로 만들어주기 때문입니다.
• 그러나 구성이 복잡해지면 위에서 배운 path와 filename이 필요한 경우가 생길 수 있습니다.