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


86

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.

Respuestas:


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


2
Hmm, creo que un comportamiento no muy útil: - / Preferiría usar preLoaders para ese comportamiento ...
w00t

18
Los cargadores actúan como funciones, por eso es de derecha a izquierda. Cuando use esto "style!css", imagínelos como funciones: style( css( file ) )... en este caso cssse llama primero.
Miguel Angelo

11
Evaluar de DERECHA a IZQUIERDA me hizo luchar por un tiempo. @ miguel-angelo tu style( css( file ) )explicación es un alivio para mi.
Evi Song

1
De DERECHA a IZQUIERDA significa esencialmente DE ABAJO a ARRIBA, cuando estamos mirando la sintaxis de Webpack 3 ... más abajo: la primera también conocida como función más interna ...
Frank Nocke

1
No sé cuándo se agregó esto, pero finalmente hay documentación sobre el pedido: webpack.js.org/concepts/loaders/#loader-features Los cargadores se pueden encadenar. Cada cargador de la cadena aplica transformaciones al recurso procesado. Una cadena se ejecuta en orden inverso. El primer cargador pasa su resultado (recurso con transformaciones aplicadas) al siguiente, y así sucesivamente. Finalmente, webpack espera que JavaScript sea devuelto por el último cargador de la cadena.
Eric Majerus

61

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.


1
Tengo esta matriz de module.loaders, ¿en qué orden se ejecutan?
Saras Arya

44
¿POR QUÉ SE CARGAN DE ABAJO HACIA ARRIBA?
light24bulbs

es posible que desee modificar la respuesta para especificar que el "cargador final" en la documentación está loaderOneen su ejemplo
aaaaaa

1
@ light24bulbs para que pueda agregar cargadores adicionales con un simple .pusha las reglas y no tener que preocuparse por anteponerlos.
Sarke

2

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'

3
Sí, aunque me gusta evitar eso porque entonces no puedes decidir en el momento de la compilación si el archivo debe ser un enlace o incrustado. También puede comenzar con !!para omitir cualquier otro cargador, por cierto…
w00t
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.