webpack.config.js

webpack.config.js 파일에서 기본적인 구성 옵션을 추가할 수 있습니다. 브라우저에서는 import, export와 같이 데이터 가져오기와 내보내기가 사용됩니다.

그러나 webpack.config.js 파일은 브라우저가 아닌 node.js 환경에서 동작하므로 다른 명령어가 사용되며 이와 함께 사용되는 중요한 개념인 entry, output의 개념에 대해서도 알아보도록 합시다.

1. entry

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  output: ''
}

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

2. output

// export
module.exports = {
  entry: './js/main.js',
  
  // 결과물(번들)을 반환하는 설정
  output: {
    path: 'dist',
    filename: 'app.js'
  }
}

output 옵션에는 entry를 통해 읽어들인 파일에 기본적인 연결 관계를 webpack이 분석하여 결과를 내어주는 기본적인 구성을 작성할 수 있습니다.

그리고 이 옵션에는 객체 데이터를 통해 대표적인 옵션인 path와 filename을 추가할 수 있습니다. path는 webpack을 동작시킬 때 어떠한 경로에 결과물을 만들어서 내어줄건지 명시할 수 있고, filename은 entry에서 읽어들인 파일명과 동일하게 지정해줄 수 있습니다.

한 가지 주의해야할 점은 path 옵션은 node.js에서 필요로 하는 절대 경로를 명시해줘야 합니다.

2.1 path 모듈 가져오기

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

// export
module.exports = {
  entry: './js/main.js',
  output: {
    path: 'dist',
    filename: 'app.js'
  }
}

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

2.2 path 옵션 명시하기

const path = require('path')

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

path라는 전역 모듈을 가져오고 이에 resolve()라는 메소드를 실행합니다. 해당 메소드는 첫 번째와 두 번째 인수의 경로를 합쳐주는 역할을 수행합니다.

__dirname은 node.js의 전역 변수로 현재 파일이 있는 그 경로를 지칭합니다. 그리고 두 번째 인수인 dist라는 파일의 경로를 합쳐서 절대 경로를 output의 path 옵션에 제공할 수 있는 것입니다.

3. build

$ npm run build

build라는 제품 모드인 터미널 명령을 통해 프로젝트 폴더에 dist 폴더가 생겼으며, 그 안에 app.js 파일이 생성되었음을 확인할 수 있습니다.

3.1 clean 옵션 true

const path = require('path')

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

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

4. path 옵션 생략

const path = require('path')

module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  }
}

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