TIL 60 | 로더(Style, CSS)
로더-1(style, css)
- 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다.
css-loader, style-loader
loader 설치
npm install -D css-loader style-loader
로 로더를 설치 후 웹팩 설정파일에 추가한다.
-
css-loader: css 코드를 모듈로 변환하는 역할을 한다.
-
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
Author And Source
이 문제에 관하여(TIL 60 | 로더(Style, CSS)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dydalsdl1414/TIL-60저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)