[Webpack] 3. CSS 번들링하기

import나 require로 css랑 기타 이미지, html 또는 폰트 파일도 묶을 수 있다.

 

CSS번들링 하기위한 설정

npm i -D style-loader css-loader mini-css-extract-plugin

 

css-loader는 css파일들을 읽어주고 style-loader는 읽은 css 파일들을 style 태그로 만들어 head태그 안에 넣어준다.

만약 style태그 대신 css 파일로 만들고 싶은 경우에 mini-css-extract-plugin을 사용하면 된다.

 

{
	module:{
    	rules:[{
        //전 포스팅 babel-loader
        },{
        test:/\.css$/,
        use:['style-loader','css-loader']
        }],
    }
}

 

위와 같이 하면 된다. test 부분은 css파일에 적용하는 거라서 익숙한데 1편 포스팅에서 본 loader 대신 use라는 것도 있다. 여러 개의 로더를 동시에 사용할 때는 use를 사용한다. (사실 loader 그대로 해도 된다.) 로더는 연달아서 사용가능하다.

 

나중에 less-loader, sass-loader, postcss-loader와 함께 세 네개를 동시에 사용하기도 한다. 뒤에서부터 실행되므로 먼저 css-loader로 처리한 뒤 그 결과물을 style-loader로 한 번 더 처리하는 것이다.

 

이제 entry의 js파일 상단에서 require('app.css')를 하면 알아서 읽어서 style태그로 만들어준다.

 

지금까지의 방법은 css를 style태그로 만드는거였다. 이제는 여러 css를 하나의 css파일로 합치는 방법을 알아보자. 

아까 설치한 mini-css-extract-plugin을 사용한다. webpack.config.js 제일 윗부분에 require 해주자

 

 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

style-loader를 대체하지만 플러그인인만큼 module과 plugins에 모두 써줘야 한다.

 

 

{
	module:{
    	rules:[{
        //전 포스팅 babel-loader
        },{
        test:/\.css$/,
        use:[MiniCssExtractPlugin.loader,'css-loader']
        }],
    },
    plugins:[
    	new MiniCssExtractPlugin({filename:'app.css'});
    ]
}

css-loader에서 처리한 결과물을 받아서 filename에 적힌 파일명으로 만들어준다.

 

참고로 서버 사이드에서 사용할 때는 style-loader와 css-loader 대신 css-loader 2버전부터는 로더 options로 exportOnlyLocals를 붙여주면 됩니다. 예를 들어 위의 코드에서 style-loader와 css-loader를 지우고 css-loader?exportOnlyLocals로 바꾸면 되는 것이죠. 서버는 css를 지원하지 않기 때문에 다르게 사용해야 합니다. 여기서 에러가 많이 나는데 절대로 style-loader를 넣어서는 안 됩니다! style-loader는 서버 사이드 렌더링을 지원하지 않습니다.

 

나중에 더 나아가 css modules(css-loader?modules, 물음표 뒤에 modules는 옵션을 의미합니다)나 sass(sass-loader), less(less-loader), postcss(postcss-loader)를 사용할 수도 있는데 그것까지는 다루지 않겠습니다. 공식 문서에 잘 나와있습니다.