Webpack | 필수 개발 환경 세팅 2 / 예제

Kate Jung·2022년 2월 28일
clean-webpack-pluginfile-loadermini-css-extract-pluginwebpack코딩앙마
0

Webpack

목록 보기
2/3
post-thumbnail

👉 mini-css-extract-plugin

🔹 사용 이유

external 방식(css 파일을 별도로 만들어서 가져오는 형태)으로 작업

(기존 처럼 internal 방식으로 사용하는 경우도 많겠지만)

🔹 설치 명령어

npm i -D mini-css-extract-plugin

🔹 설정

  1. webpack.config.js

    (...생략)
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 👈 가져옴

module.exports = {
  (...설정)
	module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"], // 👈 변경
      },
    ],
  },
  plugins: [  // 👈 설정
    (...생략)
    new MiniCssExtractPlugin({ // 👈 추가
      filename: "common.css",
    }),
  ],
  (...생략)
};

    • plugins

      플러그인이니까 여기서 설정

    • filename (옵션)

      파일 이름 지정

    • style-loade → MiniCssExtractPlugin.loader 변경

      • 변경 이유

        외부에서 가져오는 역할을 하기 때문

      • style-loader

        head에 style 태그 넣음

  2. npm start

    • 확인

      외부 css파일을 link를 이용해서 불러오는 것 확인 가능

      • [참고] common.css 열어서 확인

        작업한 내용 나옴.

        (common.css 위에 마우스 왼쪽 클릭 후, Open in new tap 클릭)


  3. 빌드 (npm run build)

    • dist/common.css 파일 생성됨. (작업한 내용)
      body {
  background-color: black;
  color: white;
}

h1 {
  color: yellow;
}
    • dist/index.html 에 수정 사항 반영됨.
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack</title>
    <script defer="defer" src="main.js"></script>
    <link href="common.css" rel="stylesheet" />  <!--👈 -->
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

👉 이미지(file-loader)

이미지 파일을 불러옴.

🔹 설치 명령어

npm i -D file-loader

🔹 과정

  1. images폴더에 jpg사진 넣기

    • 위치: src/images/angma.jpg

  2. src/index.js 에 이미지 불러오기

    import { add, hello } from "./util";
import "./style.css";
import "./header.css";
import logo from "./images/angma.jpg";

const text = hello("<h1>나는 코딩앙마!!~~</h1>");
const num = add(1, 2);
const img = `<img src="${logo}" alt="코딩앙마" />`;

document.getElementById("root").innerHTML = img + text + num;

  3. 설정 (webpack.config.js)

    (...생략)

module.exports = {
  (...생략)
  module: {
    rules: [
      (...생략)
      {
        test: /\.jpg$/, // 👈 확장자
        use: ["file-loader"] // 👈 
      }
    ],
  },
  (...생략)
};

  4. 서버 띄우기

    npm start

    • 이미지 잘 보임

📌 예제 (회원 리스트)

1. 기본 형태 제작

  1. 데이터 제작

    src/index.js

    import "./style.css";
import "./header.css";

// [예제] 회원 데이터
const users = [
  {
    id: 1,
    name: "블랙 위도우",
  },
  {
    id: 2,
    name: "아이언맨",
  },
  {
    id: 3,
    name: "헐크",
  },
  {
    id: 4,
    name: "스파이더 맨",
  },
  {
    id: 5,
    name: "캡틴 아메리카",
  },
];

document.getElementById("root").innerHTML = img + text + num;

  2. 개별 리스트 제작

    src/User.js

    import photo from "./images/angma.jpg";

export default function User({ name }) {
  // 회원의 이름을 받음
  const li = document.createElement("li");
  li.innerHTML = `
      <img src="${photo}" alt="${name}"/>
      ${name}
  `;
  return li;
}

  3. 리스트 제작

    src/List.js

    import User from "./User";

export default function List({ userList }) {
  const ul = document.createElement("ul");
  userList.forEach((el) => {
    ul.appendChild(User({ name: el.name }));
  });
  return ul;
}

  4. 리스트에 데이터 내려주기

    src/index.js 수정

    import "./style.css";
import "./header.css";
import List from "./List"; // 👈

// [예제] 회원 데이터
const users = [
  {
    id: 1,
    name: "블랙 위도우",
  },
  {
    id: 2,
    name: "아이언맨",
  },
  {
    id: 3,
    name: "헐크",
  },
  {
    id: 4,
    name: "스파이더 맨",
  },
  {
    id: 5,
    name: "캡틴 아메리카",
  },
];

document.getElementById("root").appendChild(List({ userList: users }));  // 👈

  5. 시작

    npm start

2. 꾸미기

  1. li에 클래스 추가

    User.js

    import photo from "./images/angma.jpg";

export default function User({ name }) {
  // 회원의 이름을 받음
  const li = document.createElement("li");
  li.classList.add("user"); // 👈 li에 user라는 클래스 추가
  li.innerHTML = `
      <img src="${photo}" alt="${name}"/>
      ${name}
  `;
  return li;
}

  2. 추가한 클래스 스타일링

    User.css

    .user {
  font-size: 20px;
  margin-top: 10px;
  padding: 10px;
  background-color: #444;
}

  3. 리스트(js)에 css import

    User.js

    import photo from "./images/angma.jpg";
import styles from "./User.css"; // 👈 user클래스 style import

export default function User({ name }) {
  // 회원의 이름을 받음
  const li = document.createElement("li");
  li.classList.add("user"); // li에 user라는 클래스 추가
  li.innerHTML = `
      <img src="${photo}" alt="${name}"/>
      ${name}
  `;
  return li;
}
    • 브라우저 확인 (적용됨)

3. 이벤트 리스너 제작

User.js

import photo from "./images/angma.jpg";
import styles from "./User.css";

export default function User({ name }) {
  const li = document.createElement("li");
  li.classList.add("user");
  li.addEventListener("click", () => { // 👈 클릭 시, 이름 띄워줌.
    alert(name); 
  });
  li.innerHTML = `
      <img src="${photo}" alt="${name}"/>
      ${name}
  `;
  return li;
}
  • 확인

👉 clean-webpack-plugin

사용하지 않는 파일들을 제거해주는 플러그인

🔹 사용 이유 예시

이 전 빌드본 때문에 불필요한 파일들이 남아있는 경우

🔻 이미지 추가 후 빌드. 이미지 import 지우고 재빌드해도 이미지 파일 남아 있음

  1. 이미지 추가

    src/imgaes/angma2.jpg

  2. 해당 이미지 index.js 에 import

    src/index.js

    (...생략)
import logo from "./images/angma.jpg";
import logo2 from "./images/angma2.jpg"; // 👈

const img = `<img src="${logo}" alt="코딩앙마" />`;
const img2 = `<img src="${logo2}" alt="코딩앙마" />`; // 👈

// [예제] 회원 데이터
const users = [
  (...생략)
];

document.getElementById("root").appendChild(List({ userList: users }));

  3. 빌드

    npm run build

    • 확인

      dist폴더에 이미지 2개 생성됨


  4. 다시 롤백 후, 빌드

    • 새 이미지 index.js 에 import 한 거 지우고 빌드

    src/index.js

    (...생략)
import List from "./List";
import logo from "./images/angma.jpg"; // 👈 logo2 지움 

const img = `<img src="${logo}" alt="코딩앙마" />`; // 👈 logo2 지움 

const users = [
  (...생략)
];

document.getElementById("root").appendChild(List({ userList: users }));

  5. 확인

    변화 없음

🔹 설치 명령어

npm i -D clean-webpack-plugin

🔹 설정

  1. webpack.config.js 

    (...생략)
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 👈

module.exports = {
  (...생략)
  plugins: [
    (...생략)
    new CleanWebpackPlugin(), // 👈
  ],
  (...생략)
};

  2. 빌드

    npm run build

  3. 확인

    불필요한 파일 (이미지) 제거됨.

참고

  • 코딩앙마_webpack 프론트엔드 필수 개발환경 셋팅 - HTML+CSS+JS+이미지
profile
Kate Jung
복습 목적 블로그 입니다.
이전 포스트

Webpack | 개념 / 필수 개발 환경 세팅 1

다음 포스트

Webpack | Bundle 사이즈 줄이는 lodash import 방법

0개의 댓글