[Webpack] config 파일(1) - entry, output, mode

1. 설정 파일 생성 및 entry, output 옵션 설정

이전 webpack 포스팅에서 다음 명령어로 bundle작업을 수행했다.

npx webpack --entry [Entry file 경로] --output-path [bundle 파일을 생성할 경로]

이렇게 직접 입력해도 되지만, 위 명령이 너무 길어서 불편한 분들은 설정(config) 파일을 도입해보는 것도 괜찮다.

 

Configuration파일 관련 내용은 아래 문서에서 확인할 수 있다.

webpack.js.org/configuration/

Configuration | webpack

 

webpack.config.js 라는 이름의 webpack 설정 파일을 생성했는데, 이건 필자가 막 지은 이름이 아니고 webpack 설정 파일의 기본 이름이다. 물론 다른 이름으로 지어도 설정 파일을 만들 수 있는데 이 부분은 잠시후에 다루기로 한다.

 

 

이제 위에 첨부한 Configuration 문서를 참고해서 설정 파일을 작성해보자.

 

설정 파일을 적용하기 전에 필자는 다음 명령어로 bundle 작업을 실행했기 때문에

entry와 output옵션을 다음과 같이 설정해주었으며, 이번에는 bundle 파일명을 main.js이 아닌 index_bundle.js로 지정하기로 했다.

const path = require('path')
module.exports = {
    entry:"./index.js", //Entry file 위치
    output:{
        path:path.resolve(__dirname, "bundle"), //output 디렉토리
        filename:'index_bundle.js' //output 파일명
    }
}

 

이렇게 설정 파일을 작성 했더니, 이제는 bundle작업을 "npx webpack" 이라는 명령어만으로 진행할 수 있게 되었다.

 

index_bundle.js도 잘 생성 되었다.

 

그리고 아까 언급하기로 했던 내용인데, 설정 파일명을 webpack.config.js이 아닌 다른 이름으로 지정했다면 다음과 같이 --config 옵션을 주고 그 뒤에 설정 파일 경로를 작성해주면 된다.

npx webpack --config [설정 파일 경로]

 

예제 - 설정 파일명을 wc.js로 지정했을 경우

const path = require('path')
module.exports = {
    entry:"./index.js", //Entry file 위치
    output:{
        path:path.resolve(__dirname, "bundle"), //output 디렉토리
        filename:'index_bundle2.js' //output 파일명
    }
}

---

+추가1) bundle 일괄 처리

 

+추가2) npx webpack --watch: 파일들의 변화를 감지하여 bundle파일을 자동으로 업데이트 해주는 옵션 

---

2. mode 옵션

mode옵션은 bundle파일을 어떤 모드로 생성할 것인지 결정하는 옵션이다.

mode의 종류로는 개발 모드와 배포 모드가 있으며, 모드를 설정하지 않을 수도 있다.

 

mode간의 차이점은 이렇다.

• 개발(development) 모드 : 개발자가 해석하기 쉬우며, 파일 크기가 큼
• 배포(production) 모드 : 코드를 최적화 했기 때문에 개발자가 해석하기 어렵고, 파일 크기가 작음

코드를 최적화 했다는 것은 코드를 극한으로 압축해서 파일 크기를 줄였다는 의미이다.

 

mode옵션은 다음과 같이 지정할 수 있으며, mode를 생략하면 기본값이 "production"로 지정된다.

mode : [모드]

 

const path = require('path')
module.exports = {
    mode : "none",
    entry:"./index.js", //Entry file 위치
    output:{
        path:path.resolve(__dirname, "bundle"), //output 디렉토리
        filename:'index_bundle_none.js' //output 파일명
    }
}

 

여러분들의 웹어플리케이션에는 배포 모드로 생성된 bundle파일을 적용함으로써 웹어플리케이션 성능을 향상시키면 된다.