Webpack 로더 정리

Webpack은 기본적으로 모든 파일을 모듈로써 바라보기 때문에 자바스크립트 코드와 JSON파일만 이해할 수 있다.

스타일시트, 이미지, 폰트까지도 다 모듈로 보기때문에, Import 구문을 사용함으로써 자바스크립트 안으로 불러들여서 사용한다.

다른 파일들을 웹팩이 이해할 수 있도록 로더를 사용해야한다.

---

- 커스텀 로더 만들어보기

- my-webpack-loader.js

module.exports = function myWebpackLoader(content) {
  console.log("myWebpackLoader가 작동합니다.");
  return content;
};

- webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 모든 js 파일에
        use: [path.resolve("./my-webpack-loader.js")], // 이 로더를 사용하겠다.
      },
    ],
  },
};

콘솔창에 입력한 문구가 2번이 출력되는데, 이 이유는 index.js 안에서 lodash 라이브러리를 또 불러오고 있기 때문이다.

- index.js

import _ from "lodash";

function component() {
  const element = document.createElement("div");

  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
  element.innerHTML = _.join(["안녕하세요", "웹팩 공부중"], " ");

  return element;
}

document.body.appendChild(component());

index.js에서 한번, lodash에서 한번 실행된다.

---

- 로더 종류

1. css-loader

- index.js

import _ from "lodash";
import "./index.css";

function component() {
  const element = document.createElement("div");

  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
  element.innerHTML = _.join(["안녕하세요", "웹팩 공부중"], " ");

  return element;
}

document.body.appendChild(component());

이런식으로 index.js에서 index.css 파일을 불러오고 빌드를 하면 파싱에러가 나온다.

웹팩이 css 파일을 읽지 못해서 발생하는 문제인데, 이럴때 필요한게 css-loader 이다.

- css-loader 설치

npm install --save css-loader

- webpack.config.js 에서 module 설정

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

main.js 안에 index.css파일로 작성한 코드가 들어가있지만 브라우저 화면상에서는 설정값이 바뀌지않았다.

이유가 무엇일까 ?

CSS 코드가 브라우저화면상에서 나타나려면, CSSOM 이라는 객체로 변환되어야하는데, 아직 변환 되지 않았기때문에 브라우저상에선 변화된 모습이 나타나지 않는것이다.

변환하기위해선 html 파일에서 직접 css파일을 불러오거나 인라인 스크립트로 넣어주는것인데

이러한 역할을 해주는것이 style loader이다.

style loader는 자바스크립트로 변경된 css코드를 html에 넣어주는 역할을 한다.

- style-loader 설치

npm install --save style-loader

- webpack.config.js use부분에 style-loader 추가

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 실행되는 순서는 뒤에서 앞으로
      },
    ],
  },

style-loader를 설치하니 css가 적용되었다.

---

- 2. Asset Modules

webpack 4에서 file-loader나 url-loader, raw-loader 로 사용되던 것들이 webpack5 에서는 Asswet Modules로 변경 되었다.

1. asset/resource => file-loader

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[hash][ext][query]", // 이미지들이 dist폴더 안에 있는 
                                                      //images폴더 안에 저장 
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpeg|jpg|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

import _ from "lodash";
import "./index.css";
import tree from "./tree.jpeg";

function component() {
  const element = document.createElement("div");
  const img = document.createElement("img");

  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
  element.innerHTML = _.join(["안녕하세요", "웹팩 공부중"], " ");
  img.src = tree;

  console.log(img.src); // http://127.0.0.1:5500/dist/b941f754966460ebf7b2.jpeg

  return element;
}

document.body.appendChild(component());

---

2. asset/inline => url-loader

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[hash][ext][query]",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpeg|jpg|gif|svg)$/,
        type: "asset/resource",
      },
      {
        test: /\.png/,
        type: "asset/inline",
      },
    ],
  },
};

import _ from "lodash";
import "./index.css";
import music from "./music.png";

function component() {
  const element = document.createElement("div");
  const img = document.createElement("img");

  // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
  element.innerHTML = _.join(["안녕하세요", "웹팩 공부중"], " ");

  img.src = music;

  element.appendChild(img);

  console.log(img.src);

  return element;
}

document.body.appendChild(component());

asset/inline으로 경로 지정을 할 경우 images폴더에 저장이 되지는 않는다 .

3. asset/source => raw-loader