회원가입

5. [웹팩] 로더의 도입

NULL 2021-10-24

이번에는 로더라는 것을 살펴보자

진짜 중요한 개념이다.

 

우리가 만든 애플리케이션을 보자.

index.html 파일에 CSS 파일을 넣고 싶다.

그러면 최종적으로 만들어진 파일이 위치하는 public 폴더에 style.css 라는 파일을 만든다.

style.css

body {
    background-color: powderblue;
    color: tomato;
}

 

이 CSS 를 동작시키기 위해 index.htmlhead 태그 안에 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 라는 것이 있다.

https://webpack.js.org/

asset 은 우리가 사용하는 이미지, CSS, Javascript 이런 것들을 전부 asset 이라고 한다.

 

밑으로 내려보면 CSS를 번들러로 로딩하는 방법이 나와있다.

이 작업을 하기 위해서는 npm 을 통해 style-loadercss-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.cssimport 받아온다.

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 들을 로더를 통과시키면 계획에 가공해서 우리가 원하는 출력값을 만들어 주는 일종의 가공 공정이 로더라고 할 수 있다.

그리고 그 로더를 세팅하는 것이 modulerules 라는 부분에 로더에 해당하는 이름을 검출하는 코드를 가지고, 그 조건에 해당하는 파일이 발견된다면 로더 들을 통과시켜서 처리해라 라고 한 것이다.

이 때, 주의해야 하는 것은 뒤쪽에 있는 로더가 먼저 실행된다.

즉, 물리적인 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

 

웹팩으로 만들어진 파일

1 0
웹팩
웹팩은 오픈 소스 자바스크립트 모듈 번들러로 여러개의 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리다.
Yesterday: 1
Today: 242