3. loader

웹팩이 웹 애플리케이션을 해석(빌드,컴파일)할때 자바스크립트 파일이 아닌 웹 리소스(html,css,images,fonts)들을 변환 할 수 있도록 도와주는 속성입니다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

🤩 로더가 필요한 이유

entry파일에 이런 코드가 있다….

// app.js
import './common.css';

console.log('css loaded');

/* common.css */
p {
  color: blue;
}

웹팩을 돌려보자…

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
}

.

.

.

.

.? 나니???

app.js 에 임포트한 common.css 파일을 해석할 녀석이 없으므로 loader를 추가해달라는 말이다.