안녕하세요. 김용성입니다.
오늘은 webpack의 꽃, loader를 적용해보도록 하겠습니다.
쉽지만 중요한 내용이니 잘 봐주세요 🤗
loader란?
제가 지난 지난 webpack prologue 포스팅에서 말했듯이 webpack은 JavaScript 파일뿐만 아니라 여러가지 css파일 심지어는 이미지 파일까지 모든 asset파일을 번들링 해줍니다. 그렇게 번들링한 파일들을 가동시키기 위해선 우리는 로더(loader)라는 것을 사용해야합니다.
webpack을 잘 다룬다는 말은 loader에 대한 옵션을 잘 설정하고 자유자재로 다루는 것과도 같은 말이라 할 수 있을 정도로 webpack에서 로더의 개념은 중요합니다. 🤗
webpack 공식 문서에 loader에 대한 설명이 잘 정리되어있으니 여러분들도 해당 문서를 읽어보시는 것을 추천드립니다. 저 또한 해당 공식문서를 바탕으로 포스팅을 진행하였습니다 :)
자 그러면 이제 loader를 도입해보겠습니다.
loader 도입
저는 오늘 지난 번에 하던 프로젝트에 style-loader와 css-loader를 적용시킬 예정입니다.
우선 source 디렉토리에 css파일을 하나 생성해주고 이름은 style.css 로 만들어준 뒤 이러한 내용을 추가해주도록 하겠습니다.
css-loader
/* style.css */
body {
background-color: #1b775b;
color: #fff;
}
색상은 전혀 상관없으니 여러분들 각자 원하시는 색상으로 css파일을 채워주세요.ㅎㅎ
index.html 파일과 해당 css파일을 연동해주기 위해 index.html 파일 내부에도 link 태그를 작성하도록 하겠습니다.
// index.html
<html>
<head>
<link rel="stylesheet" href="./source/style.css">
</head>
<body>
<h1>Webpack practice</h1>
<div id='root'></div>
<script src="./public/main.js">
</script>
</body>
</html>이렇게 하시면 페이지에 여러분들이 작성한 css 코드가 적용되었음을 확인할 수 있을겁니다. 이제 inspect창을 켜서 우리가 해당 웹페이지를 불러올 때 어떤 파일들을 load해오는지 체크해보도록 하겠습니다.
inspect창의 network 탭에 들어가보면 지난번에 bundling 해준 main.js와 더불어 styls.css파일도 같이 load해오는 것을 보실 수 있죠?
이제부터 우리는 style.css를 다른 JavaScript 파일들과 함께 번들링해서 main.js 하나의 파일만 로드해와도 css파일을 적용시킬 수 있게끔 해보겠습니다.
터미널에 다음과 같이 명령어를 실행시켜줍니다.
$ npm install -D css-loader style-loader
해당 모듈이 설치가 되었다면 이제 지난번에 작성했던 webpack.config.js 파일 내부의 module 부분 코드를 변경시켜주세요.
//webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader"],
},
],
},
확장자가 .css인 파일들을 css-loader를 사용하여 loader해온다는 rules를 명시해준 것입니다. 이렇게 함으로서 우리는 css파일을 번들링하고 해당 파일을 css-loader를 통해 읽어올 수 있는 것이죠.
직관적인 코드이기 때문에 이해하기 어려우시진 않을거예요. 또한 공식문서에도 그대로 나와있습니다 :)
이번에는 index.js파일로 가서 style.css파일을 import 시켜주도록 하겠습니다. 또한 css파일이 잘 받아와지는지 확인하기 위해 console도 하나 추가해주도록 하겠습니다!
// index.js
import lastName from "./kim.js"
import firstName from "./yongseong.js"
import css from "./style.css" //css import
document.querySelector("#root").innerHTML = lastName + " " + firstName
console.log("css", css) //console 확인
이렇게 작성한 뒤 index.html파일의 link태그는 더이상 필요가 없으니 지워주신 후에 다음과 같이 지난 포스팅에서 배웠던 webpack 적용 명령어를 입력해줍니다.
$ npx webpack
이렇게 작업을 해주면 webpack은 entry파일인 index.js를 읽어나가면서 번들링 작업을 해줄텐데요. 중간에 .css 확장자를 가진 파일이 있는 것을 보고 css-loader를 적용해줄것입니다. 한번 inspect의 console 탭을 확인해볼까요?
여러분들도 이렇게 css파일이 console창에 찍히는 것을 확인하셨나요? 그렇다면 우리가 css-loader를 성공적으로 적용했다는 것입니다.
inspect의 network를 확인해보시면 전처럼 style.css파일을 받아오지 않는 것도 확인하실 수 있을거예요.😀😀😀
✋ 그렇지만 page의 style은 아직 적용되지 않았는데요?
네 맞습니다. css-loader은 css파일을 읽어올 뿐 style을 적용시키지는 않습니다. style 파일을 자동으로 적용시키기 위해 아까 제가 모듈을 2가지 설치해주었는데요. 이번에는 또다른 loader인 style-loader를 사용하여 style을 자동으로 적용시켜주도록 해볼께요!
style-loader
아주 간단합니다. 아까 수정한 webpack.config.js 파일의 module 부분에 한 줄만 추가해주세요.
주의할 점!! style-loader가 css-loader 보다 앞 부분에 작성되어 있어야 합니다. 그렇지 않으면 css파일을 읽어오지 못해 에러가 발생해요 🤦♀️ 그 이유는 rules의 기본 설정이 loader를 뒤에서부터 읽어오는 것이기 때문입니다. css-loader를 통해서 .css 확장자 파일을 읽어온 후에 style-loader를 적용시키기 때문입니다. 이 점 꼭 알아두세요!
//webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"], //순서 주의
},
],
},이렇게 변동하고 난 뒤 다시 명령어를 입력해줍니다.
$ npx webpack
성공적으로 compile이 되었나요? 그렇다면 다시 페이지로 돌아와서 새로고침을 해주세요. 어떤가요? style이 잘 적용된 화면을 보실 수 있죠?
즉 우리가 입력한 asset들을 loader에 통과시키면 webpack은 그것들을 가공하여 우리가 원하는 output으로 만들어줍니다. 그러한 loader를 다루기 위해서 우리는 configuration 파일 내의 rules라는 것을 조건에 맞게 작성해주는 것이죠.
마무리
상당히 쉬운 내용이지만 정말 중요한 부분입니다.
제가 위에서 언급했듯, webpack loader 공식 문서를 읽어보고 다른 loader들도 여러분들이 다뤄보시면 많은 도움이 될 것이라 생각합니다.
읽어주셔서 감사합니다 :)
