webpack (loader) - css, style

로더의 역할

웹팩은 모든 파일을 모듈로 바라본다. js 뿐만아니라 css, image, font까지 모듈로 보기 때문에 import 구문을 사용하여 js 코드 안으로 가져올수 있다.

이것은 웹팩의 로더 덕분인데 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 URL 형식의 문자열로 변환한다. 또한 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.

로더는 각 파일을 처리하기 위한 역할, 처리할 파일의 패턴을 명시하고 패턴에 걸리는 파일들은 use에 설정한 로더 함수가 돌도록 한다.

ex) webpack.config.js

const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\\.js$/, //패턴은 정규표현식
        use: [
          path.resolve('./webpack-loader.js'),
        ]
      }
    ]
  },
  ...
}

자주 사용되는 로더

css-loader

js에서 스타일시트 파일을 import하려면 css 파일이 모듈이 되어야 한다.

npm i css-loader

webpack.config.js

rules: [
  ...,
  {
    test: /\\.css$/,
    use: [
      'css-loader'
    ]
  }
]

main.css

body {
  background-color: skyblue
}

app.js

import './main.css';

npm run build
open index.html

css-loader를 설정하고 빌드해보면 main.js에는 적용되었지만 여전히 브라우저에는 스타일이 적용되지 않은 모습을 볼 수있다.

스타일이 정상적으로 보이기 위해서는 css 코드가 cssom(css 객체 모델)로 변환되어야한다.

style-loader

자바스크립트로 변환된 css 코드를 html에 넣어주는 loader

npm i style-loader

rules: [
  ...,
  {
    test: /\\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  }
]

style 로더까지 적용해 주면 정상적으로 브라우저에 스타일이 적용된 모습을 볼 수 있다.