[웹팩(2)]

● 로더

웹팩에서 로더는 모든 파일을 자바스크립트의 모듈 처럼 만들어줍니다. (이미지, CSS, 폰트.. 등)

웹팩(1)에서 실습했던 파일을 그대로 가지고 실습을 진행해 보겠읍니다.

폴더 최상단에 파일을 하나 만들어줍니다.

my-webapck-loader.js

module.exports = function myWebpackLoader(content){
  console.log('myWebpackLoader가 작동함');
  return content;
}

로더는 함수로 만들어줍니다.

다시 confing파일로 돌아와서

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 : /\.js$/,
        use : [
          path.resolve('./my-webpack-loader.js')
        ]
      }
    ]
  }
}

module부분을 추가해줍니다.

• module은 객체고
• rules는 배열이여합니다.
• 그리고 안에 test, use를 적어주는데, test는 어떻게 끝나는 문서들을 고를것인지
• 그리고 use는 어떤 로더를 사용할 것인지를 말합니다.

그런데 보면

myWebpackLoader가 작동함
myWebpackLoader가 작동함
asset main.js 4.38 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 96 bytes
  ./src/app.js 59 bytes [built] [code generated]
  ./src/math.js 37 bytes [built] [code generated]
webpack 5.81.0 compiled successfully in 167 ms
DAEUNs-Macbook-Pro:sample kimdaeun$

myWebpackLoader가 두번 작동한 것을 볼 수 있습니다. 왜냐하면 app.js, math.js 두개의 js 파일이 있기때문에 로더가 두번 실행된 것입니다.

 

다음으로 로더부분으로 돌아와서 아래같이 수정해줍니다.

my-webapck-loader.js

module.exports = function myWebpackLoader(content){
  return content.replace('console.log(', 'alert(');
}

들어오는 컨텐츠에서 콘솔로그 부분이 있다면, alert로 수정하겠다는 의미와 같습니다.

app.js

import * as math from './math.js'

console.log(math.sum(1,2));

 math.js

export function sum(a, b){
  return a + b;
}

 

그러고 다시 build를 해줍니다.

그러고 open index.html를 터미널에 적어주면,

그럼 얼러트창이 뜨는 것을 볼 수 잇씁니다.

 

● 정리

따라서 로더는 각 파일을 정리하기 위한 도구라고 생각하면 됩니다. 패턴을 test에 설정하고, test에 걸리는 애들은 use라는 처리를 해준다고 생각하면 되겠습니다.

 

● 자주 쓰이는 로더

❍ CSS-loader

생각해보면 css같은 파일은 모듈이 아닌데도, import 문으로 상단에 불러올 수 있습니다. 이는 모두 웹팩때문인데요, 로더때문에 모듈이 아닌 것들도 모듈로 만들어 불러올 수있습니다. 그 중에서도 자주 쓰이는 css-loader에 대해 알아보겠습니다.

app.js

import './app.css';

 

위와 같이 app.js 를 수정해줍니다. 다음 src 폴더에 app.css 파일을 만들고 아래와 같이 적어줍니다.

app.css

body{
  background-color: green;
}

그러고 나서 빌드를 해주면?

에러가 뜹ㄴㅣ다••• 왜냐하면? css파일은 모듈이 아니기때문이죠? 따라서모듈로 만들어주어야합니다.

그럼 css-loader를 설치해줍니다.

npm i css-loader

다음 webpack.cofing.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 : [
          'css-loader'
        ]
      }
    ]
  }
}

그러고나서 빌드해주면? 성공!

하지만 Index.html 파일을 브라우저에서 열어보면 백그라운드 색이 초록색이 아닙니다.

왜냐하면 로더가 css파일을 js파일로 변환은 해주었지만, CSSOM형태로 변환되지 않았기 때문입니다. 즉, index.html에 인라인코드로 넣어주지 않았다는 거죠. 그냥 js파일로만 변환했을 뿐, index.html에 적용해주는 작업은 해주지 않았다.는 것입니다.

따라서 style-loader가 필요합니다. 대부분 css-loader와 style-loader를 한꺼번에 같이 사용합니다.

 

❍ style-loader

npm i style-loader

설치하고 나서, webpack-config.js를 수정해줍니다.

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

use에 style-loader를 넣어주는데, 순서는 배열의 뒤에서부터 앞으로 로더가 작동하기 때문에, 먼저 작업이 되야하는 부분은 맨뒤부터 시작해서 넣어줍니다.

그 다음 빌드해줍니다.

그다음 브라우저를 열어주면? ㅎㅎ 

 

❍ file-loader

로더는 css파일 뿐만 아니라 이미지 파일도 모듈로 사용할 수 있습니다. 

먼저 아래 파일을 받아주세요.

bg.png

1.17MB

그러고 src폴더에 넣어주세요

그다음 app.css파일을 아래와 같이 수정해주세요.

body{
  background-image: url(bg.png);
}

다음 빌드를 해줍니다.

원래는 png확장자를 보고 에러를 떠야하는데 ^^;; 이제 css-loader가 지원을 해주는건가 싶네요.  사실 이 실습은 예전 웹팩 버전으로 이루어져있기 때문에, 만약에 css파일이 아니라, 그냥 이미지 파일을 로더로 작업했다면 그것 또한 작업되지 않았을 테니 일단 실습을 진행해보겟읍니다.

파일로더를 설치해줍니다. 

npm i file-loader

다음 webpack.config.js를 수정해줍니다.

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

rules 배열에 하나씩 객체를 넣어주면 파일마다의 로더 설정을 해줄 수 있습니다.

그러고 나서 빌드해주면

이런식으로 이미지 파일이 두개가 생기고, main.js 파일이 만들어집니다. 이미지 파일 앞의 이름이 막 엄청 긴데, 이걸 해시값이라고 합니다.

웹팩은 빌드를 할 때마다 유니크한 값을 생성하는데, 이를 해시값이라고 합니다.

그런데이미지가 2개죠? 보니까. css-loader가 css파일을 모듈로 만들어줄때 이미지도 모듈화시켜주네요. 아마 버전이 업그레이드 되면서 더 좋아진 것 같습니다. file-loader도 해주지만, css-loader만으로도 이제 충분히 이미지를 모듈화를 시켜주네요.

호호..로더는 여기까지 포스팅하겟읍니다..

 

즉, 로더는 뭐다? js파일뿐만 아니라 다른 파일들도 모듈화를 시켜준다!