웹팩의 엔트리와 아웃풋
이전 포스팅에서 웹팩이 필요한 이유에 대해 알아보았다. 짧게 요약하면 모든 브라우저 환경에서 모듈 시스템을 적용하기 위해서이다.
출처: webpack.js.org
왼쪽 이미지처럼 웹팩은 js를 비롯한 여러 모듈들을 하나로 묶어주는 번들러 역할을 한다. 이전 예시에서 app.js는 math.js 파일을 import 키워드로 가지고 있다. 이는 app.js는 math.js 에 대한 의존성을 가지고 있다고 표현할 수 있는데 웹팩은 이러한 의존성을 가진 모든 모듈들을 하나의 번들(오른쪽 이미지에서 js, css, img 등 하나 하나를 번들이라 한다)로 묶어주는 역할을 한다.
실습
실제 웹팩 역할을 하는 웹팩 패키지와 terminal 명령어를 쓸 수 있게 해주는 cli 패키지를 설치해보자.
1
npm install -D webpack@4 webpack-cli@4
설치 후 위 이미지처럼 -D 옵션을 주었기에 devDependencies 에 두 개가 추가되었을 것이다. dependencies와 devDependencies의 차이는 다음과 같다.
- dependencies: 실제 프로젝트에 사용되는 패키지
- devDependencies: 개발용 패키지
설치 node_modules 폴더 안의 .bin 디렉토리 내부를 보면 다음과 같이 정상적으로 설치된 것을 확인할 수 있다.
–help 옵션으로 사용 방법을 확인해 보자.
1
2
3
4
5
6
$ node_modules/.bin/webpack --help
--mode Enable production optimizations or development hints.
[선택: "development", "production", "none"]
--entry The entry point(s) of the compilation. [문자열]
--output, -o The output path and file for compilation assets
webpack을 실행할땐 필수적으로 3개의 옵션이 필요하다.
- mode: 웹팩 실행 모드는 의미하는데 개발 버전인 development를 지정한다(production: 운영, none: 없음)
- entry: 시작점 경로를 지정하는 옵션(module의 시작점)
- output: 번들링 결과물을 위치할 경로
다음 명령어를 실행하여 실제 웹팩을 실행시켜 보자.
1
node_modules/.bin/webpack --mode development --entry ./src/app.js -o dist
그러면 웹팩에 의해 번들링된 결과물을 dist 티렉토리에 안에 위치하는 것을 볼 수 있을 것이고 똑같이 index.html 에서 로드하면 똑같은 결과가 실행된 것을 볼 수 있다.
이렇게 웹팩은 여러 개의 모듈을 하나의 파일(번들)로 만들어주는 역할을 한다. 옵션에 필수 인자 세개만 전달해줬지만 이후에는 더 많은 옵션을 주어야만 할 것이다.
하지만 매번 이렇게 매번 옵션을 주며 실행하는 것은 정말 참 번거로운 일이다. 그러기에 웹팩 설정 파일(webpack.config.js)을 따로 만들어보자.
웹팩 설정 파일(webapck.config.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path');
module.exports = { // es6의 모듈 시스템은 아니고 node의 모듈 시스템이다.(CommonJS)
mode: 'development',
entry: {
main: './src/app.js',
main2: './src/app2.js',
},
output: {
path: path.resolve('./dist'), // output 디렉토리는 절대 경로명을 입력해준다. node의 path 모듈을 가져와서 활용해준다.
fileaname: '[name].js' // 번들링된 파일명, entry에서 설정한 key값으로 치환된다., entry가 여러 개일 수도 있기에 output도 여러 개가 일 수 있다. 따라서 이렇게 key 값으로 동적으로 파일명을 만들어줄 수 있다.
}
}
위의 main2를 삭제하고 웹팩을 실행시켜 보자.
이번에는 직접 커맨드라인으로 실행시키는 것이 아닌 npm(프로젝트를 관리하는 도구)의 스크립트를 자동화해주는 기능을 활용해보자. 즉, webpack으로 번들링하는 과정을 npm script에 등록해보자.
이전과는 다르게 옵션을 다 안적어주어도 된다. webpack명령어만 적어주면 자동적으로 node_modules에 있는 webpack 커맨드라인을 찾아 기본 설정 파일인 (webpack.config.js)를 읽어서 실행시켜 준다.
이것을 실행하려면 다음 명령어를 실행시켜주면 된다.
1
npm run build
그러면 정상적으로 dist디렉토리 밑에 번들 결과가 보일 것이다.