Webpack의 로더 순서는 무엇입니까?

파일과 일치하는 여러 테스트가있는 로더 구성이있는 경우 첫 번째 일치하는 로더 만 사용되기를 기대하지만 그렇지 않은 것 같습니다.

나는 소스를 읽으려고 시도했지만 내가 로딩을 구현한다고 생각하는 비트를 찾았을 때도 그것이 어떻게 작동하는지 이해할 수 없습니다.

문서 는 상황이 어떻게 작동해야하는지 언급하지 않습니다.

{
    test: /\.css$/,
    loaders: ['style'],
},
{
    test: /\.css$/,
    loaders: ['css'],
},

과

{
    test: /\.css$/,
    loaders: ['style', 'css'],
},

동일하게 보입니다. 기능 측면에서 이것은 style(css(file))(Miguel에게 감사드립니다) 와 동일 합니다.

그 안에서는 오른쪽에서 왼쪽으로loaders 평가됩니다 .

공식 문서는 정말 잘 설명합니다. 불행히도 필요한 모든 정보는 문서의 다른 섹션에 분산되어 있습니다. 당신이 알아야 할 모든 것을 정리하겠습니다.

1.

순서가 올바른지 확인하십시오 (아래에서 위로).

2.

리소스 파일의 소스를 매개 변수로 사용하고 새 소스를 반환하는 함수입니다.

삼.

로더를 연결할 수 있습니다. 리소스에 대한 파이프 라인에서 적용됩니다. 최종 로더는 JavaScript를 반환 할 것으로 예상됩니다. 서로 다른 로더는 다음 로더에 전달되는 임의의 형식으로 소스를 반환 할 수 있습니다.

그래서...

가지고 somefile.css있고 통과하는 loaderOne경우 loaderTwo, loaderThree은 일반 체인 함수처럼 작동합니다.

{
    test: /\.css$/,
    loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}

정확히 같은 의미 ...

loaderOne(loaderTwo(loaderThree(somefile.css)))

그런트에서 온다면 || 꿀꺽 꿀꺽 세계는 혼란 스럽습니다. 로더 순서를 오른쪽에서 왼쪽으로 읽으십시오.

이 답변은 나에게 도움이되었지만 로더 순서에 영향을 미치는 또 다른 요점, 즉 로더 이름으로 보완하고 싶습니다 ! 접근하다.

url-loader우선 순위가 더 높은 설정이 file-loader있고 후자와 함께 이미지 경로 를 가져오고 싶다고 가정 해 보겠습니다 . 아무것도하지 않으면 url-loader(인코딩 된 데이터 URL을 생성하는) 파일을 가져옵니다 .

가져 오기에 접두사를 붙이면 file-loader!가져 오기가 해당 로더로 전달됩니다.

import image from 'file-loader!./my-img.png'