Webpack은 자바스크립트 개발자들이 좀 더 쾌적한 개발 경험을 할 수 있도록 여러가지 개발 편의 기능을 제공합니다. 이 번 포스트에서는 Webpack을 사용하면서 개발 편의성을 개선시킬 수 방법에 대해서 알아보겠습니다.
실습 프로젝트
먼저 실습 프로젝트를 만들겠습니다. 새로운 디렉토리를 만들고 NPM 프로젝트를 초기화 후, Webpack과 Webpack CLI 패키지를 설치합니다.
1
2
3
4
mkdir webpack-development
cd webpack-development
npm init -y
npm i -D webpack webpack-cli
그 다음, 다음과 같이 src/index.js 와 dist/index.html 파일을 작성합니다.
- src/index.js
1
2
const message = document.createTextNode("안녕, 웹팩?!")
document.body.appendChild(message)
- dist/index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
자 이제, 터미널에서 웹팩을 커맨드를 실행시켜 번들을 합니다. Webpack의 디폴트 설정에 따라 src/index.js 를 읽어들여 dist/main.js 을 만들어냅니다.
1
2
3
➜ webpack-development git:(master) ✗ npx webpack
asset main.js 91 bytes [emitted] [minimized] (name: main)
./src/index.js 94 bytes [built] [code generated]
코드 수정의 번거러움
안녕, 웹팩?! 대신에 뭐야? 웹팩?! 을 화면에 출력한다는 가정을 합시다. 먼저 src/index.js 파일을 열어서 소스 코드를 수정해야됩니다.
1
2
const message = document.createTextNode("뭐야? 웹팩?!")
document.body.appendChild(message)
여기서 다시 브라우저를 새로고침 하면 여전히 기존 메세지가 화면에 표시됨을 알 수 있습니다. 왜냐하면, dist/index.html 파일은 src/index.js 가 아닌 번들링으로 나온 dist/main.js 파일을 참조하고 있기 때문입니다. 따라서 다음과 같이 추가로 터미널에서 Webpack을 실행시켜 번들 파일인 dist/main.js 까지 업데이트를 해주어야 합니다.
1
npx webpack
다시 브라우저를 새로고침을 하면 의도 했던바와 같이 뭐야? 웹팩?!이 화면에 표시될 것입니다. 이처럼 Webpack을 사용하지 않을 때는 그냥 코드를 변경 후 파일을 저장만 하면 되는데, Webpack을 사용할 때는 매번 번들 파일까지 만들어 줘야 하기 때문에 개발이 상당히 번거럽습니다.
Webpack 감시 옵션
다행히도 이렇게 매번 터미널에서 npx webpack이나 npm run build(NPM 스크립트로 등록해놓은 경우)와 같은 커맨드를 실행시키지 않고도 프로젝트의 변경 내용을 감시해서 적용해주는 기능이 있습니다. 바로 Webpack 커맨드를 실행할 때 --watch 옵션을 주는 것입니다.
1
2
3
4
5
6
7
➜ webpack-development git:(master) ✗ npx webpack --watch
asset main.js 91 bytes [compared for emit] [minimized] (name: main)
./src/index.js 94 bytes [built] [code generated]
webpack 5.34.0 compiled with 1 warning in 173 ms
asset main.js 90 bytes [emitted] [minimized] (name: main)
./src/index.js 93 bytes [built] [code generated]
Webpack을 감시 옵션을 줘서 실행시키면 한 번 번들을 하고 마는 것이 아니라 소스 파일을 감시하는 프로세스가 계속 떠있게 됩니다. 그리고 이 프로세스가 변경 사항을 캐치해서 바로 바로 반영을 해줍니다.
하지만 아직까지도 매번 브라우저에서 새로고침을 해줘야 한다는 점이 귀찮게 느껴질 수도 있습니다.
Webpack 개발 서버
Webpack에서 제공하는 개발 서버를 사용하면 live reloading통해, 코드 변경을 하게되면 Webpack 실행 뿐만 아니라 브라우저에서 새로고침 조차 할 필요가 없이 자동 반영됩니다.
먼저 터미널에서 webpack-dev-server NPM 패키지를 개발 의존성으로 설치 후 Webpack 개발 서버를 구동합니다. index.html 파일이 dist 디렉토리 안에 위치하기 때문에 Webpack 개발 서버 구동 시 --content-base 옵션으로 ./dist를 넘겨주어야 합니다.
1
2
3
4
5
6
➜ webpack-development git:(master) ✗ npm i -D webpack-dev-server
➜ webpack-development git:(master) ✗ npx webpack serve --content-base ./dist --port 3020
ℹ ｢wds｣: Project is running at http://localhost:3020/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
⚠ ｢wdm｣: asset main.js 149 KiB [emitted] [minimized] (name: main) 1 related asset
- webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
const path = require("path") // NPM를 이용해서 설치
module.exports = {
devServer : {
contentBase: path.join(__dirname, 'dist'),
publicPath: "/",
host: "localhost",
overlay: true,
port: 3001,
stats: "errors-only",
historyApiFallback: true,
}
}
Webpack 설정 파일에 개발 서버 옵션을 설정 할 수가 있다.
- contentBase: 정적파일을 제공할 경로, 기본값은 Webpack 아웃풋이다.
- publicPath: 브라우저를 통해 접근하는 경로. 기본값은 ‘/’이다.
- Host: 개발환경에서 도메인을 맞춰야 하는 상황에서 사용된다. 예를들어 쿠키 기반의 인증은 인증 서버와 동일한 도메인으로 개발환경을 맞추어야 한다.
- Overlay: 빌드시 에러나 경고를 브라우저 화면에 표시한다.
- Port: 개발 서버 포트 번호를 설정한다 기본값은 8080
- stats: 메세지 수준을 정할 수 있다. ‘none’, ‘errors-only’, ‘minimal’, ‘nomal’, ‘verbose’로 메세지 수준을 조절한다.
- historyApiFallBack: 히스토리 Api를 사용하는 SPA 개발시 설정한다. 404가 발생하면 index.html로 리다이렉트 한다.
이 외에도 개발 서버를 실행할때 명령어 인자로 --progress 를 추가하면 빌드 진행율을 보여준다. 빌드 시간이 길어질 경우 사용하면 좋다.
주의사항
Webpack 개발 서버는 순수 개발용으로 디자인된 서버이기 때문에 따라서 상용 환경에서는 사용을 권장하지 않습니다. 또한 Webpack dev server를 구동한 상태에서 소스 파일인 src/index.js 수정 후 번들 파일인 dist/main.js 을 열어보면 변경 사항이 반영되지 않았다는 것을 알 수 있습니다. 실제 최종적으로 npx webpack 커맨드를 실행 시키기 전까지는 이 번들 파일은 변경되지 않습니다. 따라서 상용 환경에 배포할 때는 반드시 실제로 Webpack을 실행시켜 번들 파일을 업데이트 해줘야 합니다.
디버깅이 어려움
Webpack을 사용할 때 애로사항이 한가지 더 생깁니다. 바로 디버깅인데요
src/index.js 파일을 열어서 의도적으로 코드에 버그를 넣어보겠습니다. 다음과 같이 appendChild() 를 addChild() 로 바꾸줍니다.
1
2
const message = document.createTextNode("뭐야? 웹팩?! 자동 리로딩중? 설정값도 적용 되었는감?")
document.body.addChild(message)
브라우저 화면에서는 메세지가 사라질 것이고, 다음과 같이 번들 파일인 main.js 기준으로 에러 정보를 표시합니다.
1
main.js:2 Uncaught TypeError: document.body.addChild is not a function
Webpack은 기본적으로 여러 자바스크립트 파일들을 하나로 묶어서 번들 파일을 만들어내고, HTML 파일을 Webpack이 만들어낸 번들 파일을 참조합니다. 따라서 브라우저에서 코드 에러가 발생하면 번들 파일 기준으로 에러 정보가 표시됩니다. 게다가 Webpack이 만들어낸 번들 파일은 기본적으로 Uglify/Minify 처리가 되어있기 때문에 본래 소스 코드의 어느 부분에서 에러가 발생한 건지 찾아내기가 어렵습니다.
소스 맵
Webpack의 소스 맵 기능을 이용하면 위와 같은 디버깅 문제를 해결할 수 있습니다.
먼저 다음과 같이 프로젝트 최상위 디렉토리에 webpack.config.js 라는 Webpack 설정 파일을 생성하고 소스 맵 설정을 추가해줍니다.
- webpack.config.js
1
2
3
module.exports = {
devtool: "inline-source-map",
}