4. 로더, OUTPUT

일단 로더에 관한 개념을 알아보자.

css라는 파일을 만들어보자.

css 파일을 만들어 link 하기 위해서 css 파일 부터 만들어야 하고, 그 후 link 태그를 추가해 외부 스타일시트를 가져오도록 하는 것이 일반적이다.

하지만 이렇게 되면 css 파일 하나당 또 한번의 connection 을 해야 하게 되어 기존의 js 를 묶어 한번에 처리했던 의미가 퇴색되게 된다. 이를 또 webpack이 해결해준다.

다시 한번 위 그림을 보자.

webpack 이 무엇인가를 바로 알 수 있게 해주는 그림이다. 저기 보면 sass 나 css, png 조차도 번들링해주는 것도 알 수 있다. 이 역할을 해주는 애가 바로 로더이다.

미리 말하겠지만 사회나가서 webpack을 얼마나 잘 알고있냐를 판가름하는 것이 이 "로더" 를 얼마나 잘 알고있냐가 될 정도로 중요한 놈이다.

webpack의 guide 페이지로 가면 Asset Management 라는 탭이 있다. Asset 이란 자산으로 우리가 코딩한 js, css 파일들을 의미한다. 여튼 여길 보면 로더를 사용하기 위해서 다음과 같은 명령어를 치라고 나와있다.

npm install —save-dev style-loader css-loader

그 후 webpack.config.js 파일을 다음과 같이 수정하라고 되어있다.

• css-loader

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'css-loader',
        ],
      },
    ],
  },
};

저 코드 중 css-loader 를 추가함으로써 webpack을 동작시켯을때 확장자가 css파일을 만나게 되면 로더가 알아서 해당 css 파일을 로더 안으로 로드시켜주게 된다.

// src/index.js
import hello_word from './hello.js'; 
import world_word from './world.js';
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

index.js 파일을 다음과 같이 바꿔준다.

그 후 번들링 한 이후 실행시켜주게 되면 css 라는 변수에 style.css 안의 내용들이 리스트화되어 들어가있는 것을 확인 할 수 있다. 즉, 이 리스트 요소를 컨트롤 해서 css를 디자인할 수 있는 것이다.

허나 직접 리스트 요소들을 사용할 필요 없이 이 적용을 자동화해주는 로더가 있다.

• style-loader

바로 style-loader 이다. 이 로더를 추가해준 webpack.config.js 파일을 다음과 같다.

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
					'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

즉 정리하자면 css-loader 는 css 파일을 읽어와서 그것을 webpack으로 가져오는 녀석이고, style-loader 는 그렇게 가져온 css 코드를 web page 안에 style 코드로 주입시켜주는 놈이다. 거의 짝꿍인 것이다.

여튼 이런식으로 config 파일을 수정해주고 다시 실행해주게 되면 index_bundle.js 하나만 connection 하여 가져오게 되었는데 css, js 모두 적용된것을 확인할 수 있다.

---

webpack.config.js 에 추가했던 코드 중에 다음 코드를 보자.

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

저기서 test: /\.css$/ 라는 문구가 있는 것을 볼 수 있다. 저 코드의 의미는 .css 로 시작하는 파일이 발견되면 밑의 로더들을 통과시켜 처리해라 라는 조건형식의 의미이다.

이 때 중요한 것은 밑쪽에 적혀있는 loader 일수록 늦게 시작된다는 것이다. 즉 밑에서 부터 차근차근 사용되는 " 체이닝" 이 된다는 것이다.

이러한 것을 적용시켜 이미지 로더, 폰트 로더 등등 여러가지 로더가 있다. 이러한 로더 중 official 하게 제공되는 로더, 커스텀화된 로더 들이 있으니 알아서 찾고 사용하면 될것이다!!!

---

이제 로드를 한 이후 어떻게 최종적인 파일의 이름 및 결과를 만들어낼 것인가를 알아보자. 즉, 하나로 합칠건지 쪼갤건지 설정하는 방법에 대해 알아보자.

OUTPUT 파트를 좀더 알아보자.

여러가지 엔트리 파일이 있는 경우 어떤식으로 config 파일을 처리해야 할까?

// webpack.config.js 파일
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index:'./src/index.js',
    about:"./src/about.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_bundle.js'
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

config 파일을 다음과 같이 바꿔주자.

추가된 코드는 entry 부분이다. 객체화 시켜 2개의 속성으로 구분하여 나누었다. 그 후 output 부분도 바꼈는데 [name] 으로 나타내서 저 부분에 index 또는 about 값이 들어가잇는 것을 확인할 수 있다.

이렇게 output을 두개로 쪼개 나타낼수도 있다.

또 다른 방법으로 하는 것이 많은데 역시 webpack document 를 검색해서 알아보는 것이 좋다. 외울 필요가 없다는 말이다.

참고로 [name], [id], [hash] 등 여러 방법이 있으니 검색해서 알아보자.