TIL | 웹팩 로더(Style, CSS)

로더-1(style, css)

• 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다.

---

 

css-loader, style-loader

loader 설치

npm install -D css-loader style-loader 로 로더를 설치 후 웹팩 설정파일에 추가한다.

1. css-loader: css 코드를 모듈로 변환하는 역할을 한다.
2. style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.)

 

webpack.config.js 파일 설정

const path = require("path");
//
module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    path: path.resolve("./dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 변환이 필요한 파일의 확장자
        use: ["style-loader", "css-loader"], // 작업을 수행하는 로더
      },
    ],
  },
};

• test: 변환이 필요한 파일의 확장자를 지정한다. 일반적으로 정규표현식을 사용한다.
• use: 변환 작업을 수행하는 로더들을 뜻한다. 로더는 배열로 설정하여 여러개를 지정할 수 있으며, 실행 순서는 뒤에서부터 앞으로의 방향이다.

 

npm run build 결과

• build 결과, style 코드가 JS 파일 안에 번들링이 된 것을 확인할 수 있었다.

---

 

Reference

• webpack 공식문서
• 프론트엔드 개발환경의 이해(기본)