[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(2) - 웹팩 기본 loader 설정하기

VSCode에서 웹팩(Webpack)을 설정하게되면 webpack.config.js 웹팩 설정파일을 사용하게 된다.

이 webpack.config.js 파일에서 loader를 설정하는 방법에 대해 알아보자.

 

loader를 설정하기에 앞서 loader 설정을 왜 해주는지에 대해 설명하자면,

js끼리만 import해서 사용한다면 웹팩을 빌드하면 상관 없지만 여기에 css 같은것들이 들어가면 오류가 발생하기 때문이다.

 

웹팩은 자바스크립트 뿐만 아니라, 이 loader를 통해 css나 이미지, 웹폰트, vueJS 등 다양한 종류의 파일을 함께 번들링할 수 있는데, 사용법만 알면 그 외에는 동일하게 처리하면 되기 때문에 가장 흔하게 사용되는 css관련한 loader에 대해서만 정리하고자 한다.

---

1. CSS 로더를 위한 css, style 로더를 설치

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

 

package.json 파일로 들어가보면 이런식으로 css-loader 와 style-loader가 설치된것을 확인할 수 있다.

 

여기서 설치한 css-loader와 style-loader에 대해 간략하게 설명하자면

css-loader 는 css형식의 파일을 javascript형식의 데이터로 변환해주는 역할이고,

style-loader 는 자바스크립트로 변경된 스타일시트를 동적으로 돔에 추가할 수 있게 해주는 역할이다.

---

2. webpack.config.js loader 설정

const path = require('path');

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

 

로더 설정에서 하나 유의해야할 점은 use 배열안에 여러 로더를 설정할 경우 로더의 실행 순서는 오른쪽에서 왼쪽순으로 실행되니 잘 사용해야한다.

(실제로 위 예제에서 style-loader와 css-loader의 자리를 바꿔 실행하면 에러가 발생한다.)

---

이렇게 설정이 끝났으면 다시 npx webpack 명령어를 통해 웹팩을 빌드해주자.

그러면 css파일을 import해서 사용하여도 에러가 발생하지는 않을것이다.

 

각종 로더에 대한 설명과 설정은 아래 홈페이지를 통해 자세히 알아보도록 하자.

 

참고 : https://webpack.js.org/loaders/

Loaders | webpack