웹팩이란?

최근 자바스크립트에서는 모듈을 이용하여 주로 작성이 되고 있다. 번들러는 모듈의 의존 관계를 분석하여 브라우저가 인식할 수 있는 자바스크립트 코드로 변환 후 하나 또는 여러개의 파일로 만들어 주는 도구이다. 번들러를 통해서 소스코드를 모듈별로 작성 할수 있고 모듈간의 의존성을 쉽게 관리할수 있다. 자바스크립트에서 많이 사용되고 있는 모듈 번들러 중에 하나가 웹팩이다.
웹팩을 사용하면 자바스크립트 뿐 아니라 HTML, CSS, Image 파일의 리소스까지 의존성 관리를 할수 있게 해준다.


웹팩 설치

옵션을 -D(–save-dev) 옵션을 줄 경우에는 devDependencies에 들어가는데 이는 개발용 패키지이다.
webpack-cli를 설치하면 터미널에서 webpack 커맨드를 사용할수 있다.

1
npm install webpack webpack-cli -D

설치가 완료되면 아래와 같이 실행할수 있다.

1
2
node_modules/.bin/webpack --mode development
npx webpack --mode development

웹팩 옵션

웹팩을 사용할 때 여러가지 옵션을 줄수 있다.
아래는 - 하나로 보이지만 실제로는 -를 2개 써주어야 한다.


  1. –mode

    • development : 개발용으로 번들링된다.
    • production : 배포용으로 번들링된다.
    • none

  2. –entry
    모듈의 의존성 그래프를 만드는 시작점을 지정 해주는 것이다. 모든 모듈의 시작 파일을 지정해준다고 생각하면 쉽다.

  3. –output
    번들링된 파일의 위치와 이름을 지정할때 사용한다.

  4. –config
    config 파일의 위치를 지정할때 사용한다. 기본값으로는 webpack.config.js 또는 webpackfile.js이다.

  5. –progress
    웹팩이 빌드되는 것을 커맨드라인으로 볼수 있게 해준다.

1
npx webpack --mode development --entry ./src/app.js --output dist/main.js

설정 파일 webpack.config.js

매번 위처럼 cli 명령어를 통해서 작업하기는 힘들다. config 파일을 통해서 작성 후에 webpack만 실행하면 편하게 작업할수 있다.


설정 파일 만들기

프로젝트 폴더의 루트에서 webpack.config.js 파일을 생성한다(package.json 파일과 동일한 위치).

1
module.exports = {};

옵션 설정하기

옵션은 cli에서 사용했었던 옵션명을 사용한다.

mode

번들링할 모드를 설정한다.

development
  • 개발용모드이다.
  • 소스맵을 제공한다.
production
  • 배포용모드이다.
  • 코드를 압축, 난독화 한다.
  • mode를 설정 하지 않을 경우 production이 default이다.
1
2
3
module.exports = {
    mode: '[development|production|none]',
}

entry

entry 옵션을 통해서 모듈의 시작점을 지정할수 있다.

1
2
3
module.exports = {
    entry: './src/app.js'
}

entry를 여러개 사용 할 경우 객체 형태로 넘겨 주면 된다. 이때 key 값은 사용자가 커스텀하게 설정 가능하다.

1
2
3
4
5
6
module.exports = {
    entry: {
        main1: './src/main1.js',
        main2: './src/main2.js'
    }
}

output

output은 번들링 된 결과를 저장하기 위한 위치를 설정한다. 기본값은 './dist/main.js' 이다. 절대경로를 사용하는 것을 권장한다(path.resolve 사용).

1
2
3
4
5
6
7
8
9
const path = require('path');

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

저장할 파일이름 [name]는 동적으로 이름을 설정가능하다. entry에서 설정한 key를 filename의 이름으로 사용가능하다.
아래처럼 entry의 key를 설정 하지 않으면 default로 main이다.

1
2
3
4
5
6
7
8
9
const path = require('path');

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

entry의 key가 app이기 때문에 번들링 된 파일은 ./dist/app.js로 만들어진다.

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');

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

package.json에 스크립트 등록하기

package.json의 scripts 부분에 아래와 같이 추가한다. 보통 build로 설정하는 듯 하다. 빌드를 할때는 npm run build 명령어를 사용하면 된다.

1
2
3
4
5
6
{
    // ...
    scripts: {
        'build': webpack
    }
}

프로젝트에 기본적인 웹팩 설정하기 순서

1. npm init 명령어 실행

package.json 파일을 생성한다.

2. 웹팩 설치
1
npm i -D webpack webpack-cli
3. 환경설정 파일 생성하기

프로젝트의 루트 디렉토리에 webpack.config.js을 생성한다.

4. 웹팩 스크립트를 추가

package.json에 웹팩을 실행할 스크립트를 추가한다.

5. 웹팩 스크립트 실행

npm run build를 통해서 웹팩을 실행한다.