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.

webpack

— w00t
fonte

Respostas:

108

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

{
    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 .

— Juho Vepsäläinen
fonte

Hmm, comportamento não muito útil, eu acho: - / Eu prefiro usar preLoaders para esse comportamento ...

— w00t

Os carregadores agem como funções, por isso é da direita para a esquerda. Quando você usar isso "style!css", imagine-as como funções: style( css( file ) )... neste caso, cssé chamado primeiro.

— Miguel Angelo

Avaliar da DIREITA para a ESQUERDA me fez lutar por um tempo. @ miguel-angelo sua style( css( file ) )explicação é um alívio para mim.

— Evi Song

Direita para a esquerda provavelmente significa, essencialmente, de baixo para cima, quando estamos olhando para Webpack 3 Sintaxe ... mais baixo: primeiro aka mais íntimo função ...

— Frank Nocke

Não sei quando foi adicionado, mas finalmente há documentação sobre o pedido: webpack.js.org/concepts/loaders/#loader-features Os carregadores podem ser encadeados. Cada carregador na cadeia aplica transformações ao recurso processado. Uma cadeia é executada na ordem inversa. O primeiro carregador passa seu resultado (recurso com transformações aplicadas) para o próximo e assim por diante. Finalmente, o webpack espera que o JavaScript seja retornado pelo último carregador da cadeia.

— Eric Majerus

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.

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

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.

— Paweł Grzybek
fonte

Eu tenho essa matriz de module.loaders, em que ordem eles são executados?

— Saras Arya

POR QUE ELES CARREGAM DE BAIXO PARA TOPO! ??

— light24bulbs

você pode querer modificar a resposta para especificar que o "carregador final" na documentação está loaderOneem seu exemplo

— aaaaaa

@ light24bulbs para que você possa adicionar carregadores adicionais com um simples .pushpara as regras e não precisa se preocupar em prefixá-los.

— Sarke

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'

— E. Sundin
fonte

Sim, embora eu goste de evitar isso porque você não pode decidir no momento da compilação se o arquivo deve ser um link ou incorporado. Você também pode começar !!a ignorar quaisquer outros carregadores BTW ...

— w00t