시작하기 앞서
이야기하기 전에 먼저 이것이 제 첫 게시글임에 굉장히 설렙니다. 항상 공부하며 막히는 것이 있을 때 다른 누군가의 블로그를 많이 참고했는데 이제 저도 블로그를 써보네요. 공부하며 틈틈히 기록할수있도록 하겠습니다.
번들러
번들러는 기본적으로 여러 모듈들을 하나의 파일로 묶어주는 도구이다. 그냥 여러개 흩어져있는 파일을 하나로 묶어주는 것 뿐 아니라 그 과정에서 가공을 거쳐서 다양한 기능을 제공한다. 이러한 번들러를 왜 사용하게 된 것일까?
기존 웹에서의 문제점
- 파일을 계속해서 요청하고 응답하는 통신 비용 발생
- 서로다른 파일에서 중복된 이름 사용
파일을 웹 서버에 요청할 때, 받아온 파일에서 또다시 다른 파일을 필요로 한다면 다시 요청을 하고 받아오는 과정이 필요하다. 파일이 많아진다면 이러한 요청또한 많아질것이고 이는 큰 부담이 될 것이다. 번들러를 통해서 하나의 모듈로 바꾸게 되면, 필요한 의존된 모듈들을 한번에 받아올 수 있고 비용이 줄어 성능이 향상될것이다.
또 여러개의 파일을 의존하여 사용할때, 서로다른 파일에서 같은 이름의 변수를 사용하게 된다면 가져와서 사용하는 입장에선 어떤 파일의 변수가 사용될 지 알수가 없다. 더 뒤에 import한 파일의 변수로 덮어써지거나 오류가 발생하게 될 것이다. 번들링을 하는 과정중에 변수명을 최소화시키는데, 이러한 과정에서 중복이 해결된다.
웹팩
번들러 중에서도 가장 많이 사용되는것은 웹팩이다. npm trends에따르면 많이 사용된다고 하는 parcel, rollup, webpack 중에서도 유독 많이 다운로드 되었다는 것을 알 수 있다.
각각 장단점이 있고 사용 방법, 편의성이나 트리쉐이킹이라고 불리는 자바스크립트의 불필요한 코드를 없애는 기능에서 차이가 있다고 한다. 다른 번들러에 대해서도 알아봐야겠다.
웹팩의 기본적인 내용과 설명 예제들까지 웹팩의 홈페이지에서 자세하게 살펴볼 수 있다.
메인 페이지의 이 그림이 번들러와 웹팩에 대해 잘 나타내는 것 같다.
왼쪽의 최초진입파일인 entry파일과 의존되어있는 다양한 파일들을 웹팩이 가공하여 오른쪽 output으로 만들어준다. 이때 번들링하는 도중에 가공해주는 것이 로더, 번들링된 이후에 가공해주는 것이 플러그인이다.
로더
웹팩은 자바스크립트 외에 다른 파일을 번들링에 포함할 때에는 로더를 사용 해 줘야 한다. 예를 들어 css 파일을 번들링하려면 css-loader, style-loader 가 필요하다.
웹팩의 설정 파일에서 로더를 지정해 줄 수 있다.
webpack.config.js
module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, };test: 대상이 될 파일의 정규식
use: 적용할 로더(순서는 뒤에 적힌 로더부터 적용됨)
여기서 css-loader는 css파일을 모듈로 가져오는 역할, style-loader는 이를 DOM에서 사용할 수 있도록 적용해주는 역할을 한다.
로더는 다양하게 존재하며, 이렇게 특정 형식의 파일을 번들링에 포함시키기도 하고, babel-loader와 같이 특정 가공을 해주기도 한다.
플러그인
플러그인은 번들링 이후 추가로 가공을 해주는 역할로 이또한 로더와 같이 굉장히 많은 종류가 있다. 웹팩 홈페이지에서 공식 플러그인과 서드파티까지 다양한 플러그인을 확인할 수 있다. 플러그인마다 사용방법이 다 다르기 때문에 필요한 경우 찾아서 사용하면 될 것 같다. 예를 들어HtmlWebpackPlugin은 미리 작성해둔 html 템플릿에 맞춰 번들링된 파일으로 html파일을 자동으로 만들어준다.
Webpack-Dev-Server
웹팩에서는 또한 유용한 개발용 서버 기능도 제공한다.
리액트 관련 정보에서 많이 들어본 HotModuleReplacement도 이 Webpack-dev-server에서 지원해준다. 정말 편리했지만 어떤 기능으로 사용되는지는 몰랐는데 웹팩이 관여하는 부분이 생각보다 많다고 느껴졌다.
webpack-dev-server에서도 설정을 통해 다양한 개발환경에 맞게 기능을 설정할 수 있는데 아직 모르는 게 많다. webpack-dev-server에 대해서는 따로 다루어보아야 할 것 같다. HMR, live reload에 대해, webpack에서는 이를 어떻게 지원해주는지 찾아봐야겠다.
마치며
처음 쓰는 글이라 중구난방이고 생각보다 많은 정보를 담지 못한 것 같습니다. 어렴풋이 아는것과 정확한 지식을 아는것은 차이가 크다는걸 느낍니다. 웹팩에 대해서, 번들러에 대해서도 모르는 게 많고 또 그 전에 기본적인 웹의 구조, 자바스크립트에서도 알아가야 할 것이 많다고 느꼈습니다. 앞으로 하나씩 알아가야겠습니다.
