답변
{
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'