¿Cuál es el pedido del cargador para webpack?

Cuando tengo una configuración de cargador con varias pruebas que coinciden con un archivo, esperaría que solo se use el primer cargador coincidente, pero ese no parece ser el caso.

Intenté leer la fuente, pero incluso cuando encontré el bit que creo que implementa la carga, no puedo entender cómo se comporta.

La documentación tampoco menciona cómo debería comportarse esa situación.

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

y

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

parecen ser iguales. En términos de función, esto es lo mismo que style(css(file))(gracias Miguel).

Tenga en cuenta que dentro de loadersellos se evalúan de derecha a izquierda .

La documentación oficial lo explica muy bien. Desafortunadamente, toda la información necesaria se encuentra en diferentes secciones de documentación. Déjame resumir todo lo que necesitas saber.

1.

Asegúrese de que estén en el orden correcto (de abajo hacia arriba).

2.

Son funciones que toman la fuente de un archivo de recursos como parámetro y devuelven la nueva fuente.

3.

Los cargadores se pueden encadenar. Se aplican en una canalización al recurso. Se espera que el cargador final devuelva JavaScript; cada cargador puede devolver la fuente en formato arbitrario, que se pasa al siguiente cargador.

Entonces...

Si usted tiene somefile.cssy está de paso a través loaderOne, loaderTwo, loaderThreees comporta como una función encadenada regular.

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

significa exactamente lo mismo que ...

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

Si vienes de gruñido || trago mundo es confuso. Simplemente lea el orden de los cargadores de derecha a izquierda.

Esta respuesta fue útil para mí, pero me gustaría complementar con otro punto que afecta el orden del cargador, que es el nombre del cargador. Acercarse.

Digamos que tiene un url-loaderen su configuración con una prioridad más alta que file-loadery le gustaría importar una ruta de imagen con este último. No hacer nada importaría el archivo a través de url-loader(lo que crea una URL de datos codificada).

Prefijar la importación con file-loader!dirigiría la importación a ese cargador.

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