Loader

Loader란?

공식 문서

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때
자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성

module이라는 이름을 사용한다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

Loader가 필요한 이유

다음과 같은 코드가 있을 때

// index.js
import "./base.css";

/* base.css */
p {
  color: blue;
}

아래와 같이 module 없이 빌드하게 되면?

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

module.exports = {
  mode: "none", // production, development, none
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  /* module: {} */
};

다음과 같은 에러가 발생한다. 에러 메세지의 내용은 파일을 해석하기 위한 적절한 로더를 추가해 달라는 것.
(일반적으로 js 파일 안에 css가 들어갈 수 없으니까)

CSS Loader 적용하기

css-loader 적용

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

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

적용 결과

빌드 에러는 나지 않았다. css 해석이 가능했다.

하지만 브라우저에서 css가 적용되지 않았다.

style-loader의 적용

눈여겨 볼 것은 css-loader와 style-loader의 순서이다.

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

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

css-loader를 먼저 적용할 경우 다음과 같은 에러가 발생한다.

css-loader를 나중에 적용할 경우 에러가 발생하지 않는다.

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

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

화면도 의도한대로 스타일이 적용되었다.

코드를 보면 head 안에 인라인 스타일이 들어간 것을 확인할 수 있다.

css-loader는 css가 웹팩 안으로 들어갈 수 있게,
style-loader는 웹팩 안에 들어간 스타일 코드를 head 안에 인라인 스타일로 넣어주는 역할임을 알 수 있다.

로더는 오른쪽에서 왼쪽 순서로 적용이 되며
순서도 연관이 있다는 것을 유의하자.

응용

만일 프로젝트에서 sass를 사용한다면
sass를 css로 바꾸는 sass-loader를 가장 마지막에 적용해야한다.

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

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

exclude란?

공식 문서
조건과 일치하는 모든 모듈을 제외한다.

적용 예시

프로젝트 내부에서 모든 자바스크립트를 대상으로 babel-loader를 적용하는데
이 때 라이브러리와 관련된 node-modules 폴더는 제외처리가 필요하다.

※ babel-loader: 최신 문법들을 여러 브라우저가 호환할 수 있게끔 변환해주는 도구

// webpack.config.js
var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "none", // production, development, none
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node-modules/
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

options란?

공식 문서
웹팩에서 지원하는 나머지 설정 옵션들

적용 예시

name은 설정의 이름

// webpack.config.js
var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "none", // production, development, none
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
            name: "[name].[ext]?[hash]"
        }
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};