5. [웹팩] 로더의 도입
이번에는 로더라는 것을 살펴보자
진짜 중요한 개념이다.
우리가 만든 애플리케이션을 보자.
index.html 파일에 CSS 파일을 넣고 싶다.
그러면 최종적으로 만들어진 파일이 위치하는 public 폴더에 style.css 라는 파일을 만든다.
style.css
body {
background-color: powderblue;
color: tomato;
}
이 CSS 를 동작시키기 위해 index.html 에 head 태그 안에 CSS 를 로드하는 link 태그로 public 폴더 안에 있는 style.css 를 불러올 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./public/style.css">
</head>
<body>
<h1>Hello, Webpack</h1>
<div id="root"></div>
<script src="./public/index_bundle.js"></script>
</body>
</html>
잘 나오는 것을 볼 수 있다.
그런데, 네트워크 탭을 살펴보면 아쉬운 것이있다.
Javascript 는 번들링을 잘 했는데, style.css 는 별도로 다운로드 되는 것이다.
그래서 Javascript 안에 style.css 파일까지 넣으면 얼마나 좋을까? 그런 생각을 할 수도 있다.
그런 환상적인 작업을 해줄 수 있는 게 웹팩이다.
아래는 웹팩이 어떤 방식으로 동작하는지를 설명하는 간단한 그림이다.
이 그림을 보면 여러가지 Javascript, 이미지, 스타일파일 등 있다.
이런 여러가지 데이터들을 번들링해서 아주 간단한 파일로 만들어 준다는 것이 번들러가 하는 일이다.
웹팩은 Javasciprt 가 아닌 png나 css 또한 번들링해주는 아주 신기한 친구다.
그리고 그것을 하는 것이 로더라는 것이다.
웹팩을 잘 다룬다는 것은 "로더를 얼마나 많이 알고 있는가? 로더를 얼마나 자유롭게 옵션을 줘서 우리가 원하는 방식대로 로더를 움직이게 하는가?" 라는 것이 핵심이다.
웹팩 Docs 주소에 Guide 로 가면 Asset Management 라는 것이 있다.
asset 은 우리가 사용하는 이미지, CSS, Javascript 이런 것들을 전부 asset 이라고 한다.
밑으로 내려보면 CSS를 번들러로 로딩하는 방법이 나와있다.
이 작업을 하기 위해서는 npm 을 통해 style-loader 와 css-loader 라는 프로그램을 설치해야 된다고 나와있다.
설치를 진행하자.
npm install --save-dev style-loader css-loader
--save-dev 는 -D 와 같다.
그 후, 내용으로는 webpack.config.js 파일을 어떻게 하면 되는지를 우리에게 알려주는 내용을 보자.
하는 내용은 추가적으로 module 이라는 키를 가진 객체를 추가한다..
webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
entry: "./source/index.js",
output: {
// __dirname 현재 파일의 위치하고 있는 경로로 약속된 변수
path: path.resolve(__dirname, "public"),
filename: "index_bundle.js"
},
module: {
rules: [
{
// 정규 표현식 .css 로 끝나는 것들 ($ -> 마지막 의미)
test: /\\.css$/,
// 웹팩을 동작시켰을 때, 확장자가 css 인 파일을 만나면
// 알아서 그 css 인 파일을 웹팩 안으로 로드 시켜주는 특수한 명령이 css-loader 이다
use: [
// 나중에 추가
// 'style-loader',
'css-loader',
],
},
]
}
}
이전에는 CSS 를 적용하기 위해서는 link 라는 태그 안에 정의해줬는데
이제 이렇게 사용하지 않고, 엔트리파일인 index.js 파일에 가서 아래 코드 처럼 style.css 를 import 받아온다.
index.js
import hello_word from "./hello.js";
import world_word from "./world.js";
import css from "./style.css";
document.querySelector('#root').innerHTML = hello_word + " " + world_word;
console.log("css", css);
또한 style.css 파일을 source 폴더 하위에 이동 시킨다.
이유는 번들링하기 위해서 이다.
과정을 보자, 번들링 을 하기 위해 npx webpack 을 실행하면, 웹팩은 webpack.config.js 파일이 있다면 안에 있는 내용을 살펴본다.
엔트리파일 index.js 를 쭉 살펴보다가 확장자가 .css 인 부분이 있다.
import css from "./style.css";
이때 module 에 확장자가 .css 로 끝나는 것을 발견하면 css-loader 라고 하는 것에게 맡겨라 라고 정의했다.
그러면 css-loader 가 해당 파일을 읽어서 그것을 css 라는 변수 안에 세팅해준다.
console.log 에 찍히는 것을 보면 css 는 이것이다 처럼 나온다.
자세히 보면 css 에 관한 내용이 Javascript의 형태로 웹팩으로 주입 된 것을 볼 수 있다.
즉, Javascript 를 이용해서 웹페이지에 스타일을 놓으면 되겠지만, 이것 조차도 자동으로 해주는 또 다른 로더가 있다.
그 로더는 style-loader 라는 것이다.
webpack.config.js 파일에 가서 style-loader 를 적용해 주자.
webpack.config.js
const path = require('path');
module.exports = {
mode: "production",
entry: "./source/index.js",
output: {
// __dirname 현재 파일의 위치하고 있는 경로로 약속된 변수
path: path.resolve(__dirname, "public"),
filename: "index_bundle.js"
},
module: {
rules: [
{
// 정규 표현식 .css 로 끝나는 것들 ($ -> 마지막 의미)
test: /\\.css$/,
// 웹팩을 동작시켰을 때, 확장자가 css 인 파일을 만나면
// 알아서 그 css 인 파일을 웹팩 안으로 로드 시켜주는 특수한 명령이 css-loader 이다
use: [
'style-loader',
'css-loader',
],
},
]
}
}
여기서 한번 정리하자.
- css-loader : CSS 파일을 읽어와
웹팩으로 가져오는로더 - style-loader : 그렇게 가져온 CSS 코드를 웹페이지 안에 style 태그로 주입해 주는
로더이다.
실행해주자.
npx webpack
웹페이지를 확인하면!
짜잔!! 스타일이 적용되었다.
또한 네트워크 탭을 보자
보이는 것처럼 index_bundle.js 파일만 읽어왔음에도 CSS가 웹에 적용되었다.
Element 탭에서 head 태그에 style 태그가 생성되고 그곳에 우리가 적용한 CSS가 보인다.
즉, 이 로더 라고 하는 것은 입력한 asset 들을 로더를 통과시키면 계획에 가공해서 우리가 원하는 출력값을 만들어 주는 일종의 가공 공정이 로더라고 할 수 있다.
그리고 그 로더를 세팅하는 것이 module 의 rules 라는 부분에 로더에 해당하는 이름을 검출하는 코드를 가지고, 그 조건에 해당하는 파일이 발견된다면 로더 들을 통과시켜서 처리해라 라고 한 것이다.
이 때, 주의해야 하는 것은 뒤쪽에 있는 로더가 먼저 실행된다.
즉, 물리적인 CSS 파일을 읽어온 다음 그것을 받아서 웹브라우저의 웹페이지에 style 태그로 낑겨 넣는 로더가 그 다음에 실행되는 것이다.
체인이 걸려있는 것처럼 작동을 한다.
뿐만 아니라 이미지, 폰트 등을 읽을 수 있다!!
[이미지 예]
webpack.config.js
const path = require('path');
module.exports = {
mode: "production",
entry: "./source/index.js",
output: {
// __dirname 현재 파일의 위치하고 있는 경로로 약속된 변수
path: path.resolve(__dirname, "public"),
filename: "index_bundle.js"
},
module: {
rules: [
{
// 정규 표현식 .css 로 끝나는 것들 ($ -> 마지막 의미)
test: /\\.css$/,
// 웹팩을 동작시켰을 때, 확장자가 css 인 파일을 만나면
// 알아서 그 css 인 파일을 웹팩 안으로 로드 시켜주는 특수한 명령이 css-loader 이다
use: [
'style-loader',
'css-loader',
],
},
{
test: /\\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
]
}
}
style.css
body {
background: url('./test_image.png');
color: tomato;
}
index.js
import hello_word from "./hello.js";
import world_word from "./world.js";
import css from "./style.css";
import test from "./test_image.png";
document.querySelector('#root').innerHTML = hello_word + " " + world_word;
const test_image = document.querySelector('#test');
test_image.src = test;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello, Webpack</h1>
<div id="root"></div>
<img id="test" />
<script src="./public/index_bundle.js"></script>
</body>
</html>
실행
npx webpack
웹팩으로 만들어진 파일
