[webpack] 웹팩 스타일 로더 vs CSS 로더

Program / 글쓴이

두 가지 질문이 있습니다.

1) CSS 로더 와 스타일 로더 는 두 개의 웹팩 로더입니다. 나는 둘 사이의 차이점을 파악할 수 없었다. 둘 다 동일한 작업을 수행 할 때 두 개의 로더를 사용해야하는 이유는 무엇입니까?

2) 위의 Readme.md 파일에서 언급 된이 .useable.less 및 .useable.css는 무엇입니까?

답변

CSS의 로더는 CSS 파일을 받아와 CSS를 반환 imports하고 url(...)웹팩의를 통해 해결 require기능 :

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

실제로하지 않습니다 할 반환 된 CSS와 아무것도.

스타일 로더는 CSS를 가져와 실제로 페이지에 스타일이 활성화되도록 CSS를 페이지에 삽입합니다.

서로 다른 작업을 수행하지만 Unix 파이프와 같이 서로 연결하는 것이 유용합니다. 예를 들어 Less CSS 전처리기를 사용하는 경우

require("style!css!less!./file.less")

에

  1. 돌려 file.less적은 로더와 일반 CSS로
  2. CSS 로더를 사용하여 CSS의 모든 imports및을 해결하십시오.url(...)
  3. 스타일 로더를 사용하여 해당 스타일을 페이지에 삽입

답변

css-loaderCSS 파일에서 문자열로 읽습니다. 당신은 그것을 대체 raw-loader하고 많은 상황에서 동일한 효과를 얻을 수 있습니다. 파일 내용을 읽고 다른 내용은 읽지 않기 때문에 다른 로더와 연결하지 않으면 기본적으로 쓸모가 없습니다.

style-loader해당 스타일을 사용하여 해당 스타일을 포함하는 <style>페이지 <head>요소에 태그를 만듭니다 .

bundle.js사용 후 자바 스크립트를 보면 style-loader생성 된 코드에 주석이 표시됩니다.

// style-loader : 태그를 추가하여 DOM에 CSS를 추가합니다.

예를 들어

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

이 예제는 이 튜토리얼 에서 나온 것입니다 . style-loader라인을 변경하여 파이프 라인에서 파이프 라인 을 제거하면

require("!style-loader!css-loader!./style.css");

에

require("css-loader!./style.css");

당신은 <style>멀리가는 것을 볼 수 있습니다.

답변

두 번째 질문 인 “위의 Readme.md 파일에 언급 된이 .useable.less 및 .useable.css는 무엇입니까?”에 대답하기 위해 기본적으로 스타일이 require'd인 경우 스타일 로더 모듈은 자동으로 <script>태그를 DOM에 태그를 삽입합니다. 해당 태그는 브라우저 창이 닫히거나 다시로드 될 때까지 DOM에 남아 있습니다. 스타일 로더 모듈은 또한 개발자가 스타일을 추가하고 더 이상 필요하지 않을 때 스타일을 추가 할 수 있도록하는 소위 “참조 횟수 API”를 제공합니다. API는 다음과 같이 작동합니다.

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

일반적으로이 API를 사용하여로드 된 스타일 시트의 확장자는 단순히 “.css”가 아니라 “.usable.css”입니다.

답변

Webpack 문서는 스타일 로더와 CSS 로더를 결합 할 것을 권장합니다.

https://webpack.js.org/loaders/style-loader/

답변