css-loader vs style-loader vs mini-css-extract-plugin(loader 동봉) - Githubissues

jerrybabah / my_video_playground

video api를 이용해서 이것 저것 해보는 레포입니다.

0 stars 0 forks source link

css-loader vs style-loader vs mini-css-extract-plugin(loader 동봉) #5

Open jerrybabah opened 4 years ago

jerrybabah commented 4 years ago

css-loader

css형식의 파일을 읽을 수 있는 webpack loader
javascript 또는 typescript 파일에서 import './css/style.css'; 처럼 css 파일을 import할 수 있게 된다.
entry 파일의 최상단에 필요한 css 파일을 import하면 된다.
css파일을 읽는 것 빼고는 아무 일도 하지 않는다.

style-loader

읽어들인 css를 index.html과 같은 페이지에 style태그로 삽입해준다.
css-loader와 함께 사용해야 한다.
html 파일에 static하게 style태그가 만들어진다거나 link태그를 통해 css파일을 참조하는 방식이 아니라, 번들된 js파일을 브라우저에서 부를 때 동적으로 style태그를 만드는 방식
공식문서를 좀 더 읽어보면 import한 css를 js코드 안에서 활용할 수도 있는 것 같다.

mini-css-extract-plugin

읽어들인 css를 별도의 css파일로 만들어준다.
css-loader와 함께 사용해야 한다.
번들 과정에서 mini-css-extract-plugin에 동봉돼있는 loader로 css-loader로 읽은 css텍스트를 읽어 css 파일로 만들어준다.
webpack을 통해서 만들어진 css파일을 html-webpack-plugin에서 link태그로 html 파일에 static하게 참조를 걸어준다.

결론

다음 세가지 경우로 css 번들 전략을 짤 수 있을 듯 하다.

css-loader, style-loader를 함께 사용하는 방식
css-loader, mini-css-extract-plugin을 함께 사용하는 방식
css-loader, mini-css-extract-plugin, style-loader를 모두 사용하는 방식: static하게 css를 참조하면서, js에서 import한 css를 활용하고 싶을 때 이렇게 사용할 듯.