[📚 라이브러리] Webpack loader 사용법

dsfasd·2022년 11월 23일

loader

loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할을 한다.
아래 예제에서는 CSS 파일을 불러오고자 한다.

준비물 : dist/index.js, src/index.js , src/style.css 파일

1. 파일 준비

브라우저에서 작동시키기 위해서 src/index.html 파일을 생성한다.
이때 다음과 같이 script src="index.js"로 작성하게 되면
index.js파일의 const _ = require('./underbar.js'); require 문법 때문에 에러가 발생한다.
(require 문법은 node.js의 문법으로 브라우저에서는 지원하지 않는다.)

<!DOCTYPE html>
<html lang="en">
<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>Shout Lorem Ipsum</title>
</head>
<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>
</html>

따라서 index.html 파일을 dist 디렉터리로 옮겨서 번들 파일인 app.bundle.js 파일과 연결시켜야 한다.

dist/index.js

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<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>Shout Lorem Ipsum Once</title>
</head>
<body>
  <div id="app"></div>
  <script src="app.bundle.js"></script>
</body>
</html>

src/index.js

const _ = require('./underbar.js');

const shout = (...sentences) => console.log(...sentences);
const shoutToHTML = (...sentences) => {
  const app = document.querySelector('#app');
  app.append(...sentences.map(sentence => {
    const shoutHere = document.createElement('div');
    shoutHere.className = 'shout';
    shoutHere.textContent = sentence;
    return shoutHere;
  }))
  return;
};

const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas feugiat elit, ac tincidunt neque vestibulum at. Mauris a eros sit amet urna efficitur tempus."

const shoutOnce = _.once(shout);
const shoutToHTMLOnce = _.once(shoutToHTML);

shoutOnce(loremIpsum);
shoutOnce(loremIpsum);
shoutOnce(loremIpsum);
shoutOnce(loremIpsum);

shoutToHTMLOnce(loremIpsum);
shoutToHTMLOnce(loremIpsum);
shoutToHTMLOnce(loremIpsum);
shoutToHTMLOnce(loremIpsum);

npm run build 명령어를 통해 번들링을 진행하면 app.bundle.js 파일에 번들링이 적용되어 dist/index.html 파일 실행시 제대로 작동하는 것을 확인할 수 있다.

2. CSS 파일 추가 -> 이 과정에서 loader 필요!

css 파일을 생성 후 index.html파일과 연결해준다.

src/style.css

/* dist/style.css */
* {
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div.shout {
  padding: 12px;
  margin: 4px;
  border-radius: 8px;
  border: 0.5px solid gray;
}

dist/index.js

<link rel="stylesheet" href="style.css">

node src/index.js 로 실행시 node.js는 css 파일을 읽을 수 없어서 문법 에러가 발생한다. 아직 로더를 설정해주지 않아서 발생한 오류이다.

3. 로더 설치 및 config 파일 작성

로더 설치

npm i -D css-loader style-loader

webpack.config.js 파일에서 로더 추가

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: { // 로더 
    rules: [
      {
				// 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
};

npm run build를 통해 번들링 후, dist/index.html 파일을 통해 CSS가 제대로 적용된것을 확인할 수 있다. 이미 css 파일까지 번들링이 되었으므로 css 연결해준 link은 삭제해도 된다.

<link rel="stylesheet" href="style.css">

폴더 구조

dsfasd

기록을 정리하는 공간!

이전 포스트

[📚 라이브러리] Webpack 사용법

다음 포스트

[📚 라이브러리] Webpack loader 사용법

loader

1. 파일 준비

dist/index.js

src/index.js

2. CSS 파일 추가 -> 이 과정에서 loader 필요!

src/style.css

dist/index.js

3. 로더 설치 및 config 파일 작성

로더 설치

webpack.config.js 파일에서 로더 추가

폴더 구조

[📚 라이브러리] Webpack 사용법

[📚 라이브러리] Webpack Plugin 사용법

0개의 댓글