npm install -D css-loader style-loader
로 로더를 설치 후 웹팩 설정파일에 추가한다.
css-loader: css 코드를 모듈로 변환하는 역할을 한다.
style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.)
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
: 변환 작업을 수행하는 로더들을 뜻한다. 로더는 배열로 설정하여 여러개를 지정할 수 있으며, 실행 순서는 뒤에서부터 앞으로의 방향이다.
build
결과, style
코드가 JS
파일 안에 번들링이 된 것을 확인할 수 있었다.