Qual é a ordem do carregador para o webpack?

Quando tenho uma configuração de carregador com vários testes correspondendo a um arquivo, esperaria que apenas o primeiro carregador compatível fosse usado, mas não parece ser o caso.

Tentei ler o código-fonte, mas mesmo quando encontrei a parte que acho que implementa o carregamento, não consigo entender como ela se comporta.

A documentação também não menciona como essa situação deve se comportar.

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

e

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

parecem ser iguais. Em termos de função é o mesmo que style(css(file))(obrigado Miguel).

Observe que loaderseles são avaliados da direita para a esquerda .

A documentação oficial explica muito bem. Infelizmente, todas as informações necessárias estão espalhadas em diferentes seções da documentação. Deixe-me encerrar tudo o que você precisa saber.

1

Verifique se eles estão na ordem correta (de baixo para cima).

2

São funções que tomam a fonte de um arquivo de recurso como parâmetro e retornam a nova fonte.

3 -

Os carregadores podem ser encadeados. Eles são aplicados em um pipeline ao recurso. Espera-se que o carregador final retorne JavaScript; cada outro carregador pode retornar a fonte em formato arbitrário, que é passado para o próximo carregador.

Então...

Se você tem somefile.csse você está passando-o através loaderOne, loaderTwo, loaderThreeé se comporta como uma função encadeada regular.

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

significa exatamente o mesmo que ...

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

Se você está vindo do grunhido || mundo gulp é confuso. Apenas leia a ordem dos carregadores da direita para a esquerda.

Essa resposta foi útil para mim, mas gostaria de complementar com outro ponto que afeta a ordem do carregador, que é o nome do carregador! aproximação.

Digamos que você tenha um url-loaderem sua configuração com uma prioridade maior do que file-loadere gostaria de importar um caminho de imagem com o último. Não fazer nada importaria o arquivo via url-loader(o que cria uma url de dados codificada).

Prefixar a importação com file-loader!direcionaria a importação para esse carregador.

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