자주 사용하는 로더

style-loader , css-loader

css 를 import 하려면 다음과 같은 오류를 만날 수 있다.

이는 css 로더와 style 로더를 설정하지 않았기 때문이다.

 

다음 처럼 style-loader 와 css-loader 를 포함시켜주면 된다.

 

file-loader

CSS 뿐만 아니라 소스코드에서 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 파일을 옮겨주는 것이 file-loader가 하는 일이다. 가령 CSS 에서 url() 함수에 이미지 파일 경로를 지정할 수 있는데 웹팩을 file-loader를 이용해서 이 파일을 처리한다.

 

webpack 4 에서는 별도로 설치를 해주어야했지만, webpack5 에는 default 로 포함이 되어있다.

// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require("path");

module.exports = {
  mode: "none",
  entry: { main: "./app.js" },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[hash][ext][query]",
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야할 파일의 확장자명 즉, js 파일에 대해 로더를 실행하라.
        use: [path.resolve("./my-webpack-loader.js")],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        type: "asset/resource",
      },
    ],
  },
};

 

여기서 file-loader 에 대한 코드는 다음 부분이다.

웹팩이 이미지 파일을 모듈로 만들어 나중에 병합할 수 있도록 만들어주는 코드이다.

다음 코드를 추가하면 images 폴더에 이미지 파일이 생성된다.

  assetModuleFilename: "images/[hash][ext][query]",

[hash]는 해쉬값 , [ext]는 확장자명을 나타낸다.

 

Url loader

Data url schema

Data Url Schema 란 src 에 보통 이미지 경로를 입력하는데, 문자열 형태로 넣을 수 있다.

data:image/png 데이터 포맷을 의미한다.

base64: 인코딩 형식을 의미한다.

작은 이미지 파일은 Data url schema 를 사용하면 더 성능에 좋다. 왜냐하면 이미지 경로를 넣을 경우 이미지를 불러오기위한 네트워크 통신을 하기때문이다.

 

ls -l

ls -l 을 사용하면 파일의 크기를 알 수 있다. 18869 는 18K 를 의미한다.

 

webpack 4 에서는 url-loader를 사용하였으나 webpack5 에서는 8kb 미만인 파일은 자동으로 url-loader 가 동작하고 , 이상은 그대로 file-loader 가 동작한다.

      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        type: "asset",
      },

 

정리

• css 로더 
  css 파일을 자바스크립트 모듈처럼 사용할 수 있도록 변환해준다.
• style 로더
  처리된 자바스크립트 문자열로 된 스타일 시트 코드를 html에 주입시켜 브라우저에 적용되도록 한다.
• file 로더
  이미지 파일을 모듈로 사용할 수 있도록 변환해준다. 변환한 파일을 설정한 경로에 위치시킨다.
• url 로더
  파일을 base64 로 인코딩해서 결과를 자바스크립트 문자열로 변환합니다. 파일 limit 이 웹팩 5 기준 8kb 로 설정되어있다.