Cargadores de paquetes web vs complementos; ¿cual es la diferencia?

¿Cuál es la diferencia entre cargadores y complementos en webpack?

La documentación de los complementos solo dice:

Use complementos para agregar funcionalidades típicamente relacionadas con los paquetes en el paquete web.

Sé que babel usa un cargador para las transformaciones jsx / es2015, pero parece que otras tareas comunes (copy-webpack-plugin, por ejemplo) usan complementos en su lugar.

Los cargadores realizan la transformación de preprocesamiento de prácticamente cualquier formato de archivo cuando usa algo como require("my-loader!./my-awesome-module")en su código. En comparación con los complementos, son bastante simples ya que (a) exponen solo una función al paquete web y (b) no pueden influir en el proceso de compilación real.

Los complementos, por otro lado, pueden integrarse profundamente en el paquete web porque pueden registrar enlaces dentro del sistema de compilación de paquetes web y acceder (y modificar) el compilador, y cómo funciona, así como la compilación. Por tanto, son más potentes, pero también más difíciles de mantener.

Añadiendo respuesta complementaria y más sencilla.

Cargadores:

Los cargadores trabajan a nivel de archivo individual durante o antes de que se genere el paquete .

Complementos:

Los complementos funcionan a nivel de paquete o fragmento y, por lo general, funcionan al final del proceso de generación del paquete. Los complementos también pueden modificar la forma en que se crean los paquetes. Los complementos tienen un control más poderoso que los cargadores.

Solo como ejemplo, puede ver claramente en la imagen de abajo dónde están trabajando los cargadores y dónde están funcionando los complementos:

Referencias: artículo e imagen

En esencia, webpack es solo un paquete de archivos. Considerando un escenario muy simple (sin división de código), esto podría significar solo las siguientes acciones (en un nivel alto):

1. encontrar el archivo de entrada y cargar su contenido en la memoria
2. hacer coincidir cierto texto dentro del contenido y evaluarlos (por ejemplo, @import)
3. encontrar las dependencias en base a una evaluación previa y hacer lo mismo con ellas
4. coserlos todos en un paquete en la memoria
5. escribir los resultados en el sistema de archivos

Cuando examina detenidamente los pasos anteriores, esto resuena con lo que hace un compilador de Java (o cualquier compilador). Por supuesto, hay diferencias, pero esas no importan para comprender los cargadores y los complementos.

Cargadores:

están aquí porque webpack promete agrupar cualquier tipo de archivo.

Dado que el paquete web en su núcleo solo es lo suficientemente capaz de agrupar archivos js, esta promesa significaba que el equipo central del paquete web tenía que incorporar flujos de compilación que permitían que el código externo transformara un tipo de archivo en particular de una manera que el paquete web pudiera consumir.

Estos códigos externos se denominan cargadores y normalmente se ejecutan durante los pasos 1 y 3 anteriores. Por lo tanto, dado que la etapa en la que estos cargadores deben ejecutarse es obvia, no requieren ganchos ni influyen en el proceso de compilación (ya que la compilación o el paquete solo ocurre en el paso 4).

Entonces, los cargadores preparan el escenario para la compilación y, en cierto modo, extienden la flexibilidad del compilador del paquete web.

Complementos:

están aquí porque aunque webpack no promete directamente una salida variable, el mundo lo quiere y webpack sí lo permite.

Dado que el paquete web en su esencia es solo un paquete y, sin embargo, pasa por varios pasos y subpasos para hacerlo, estos pasos se pueden utilizar para crear funciones adicionales.

El proceso de construcción de producción (minificación y escritura en el sistema de archivos), que es una capacidad nativa del compilador de paquetes web, por ejemplo, puede tratarse como una extensión de su capacidad central (que es simplemente empaquetar) y puede tratarse como un complemento nativo. Si no lo hubieran proporcionado, alguien más lo habría hecho.

Al observar el complemento nativo anterior, parece que la agrupación o compilación del paquete web se puede dividir en un proceso de agrupación central, además de una gran cantidad de procesos de complementos nativos que podemos desactivar, personalizar o ampliar. Esto significó permitir que el código externo se uniera al proceso de agrupación en puntos específicos entre los que pueden elegir (llamados ganchos).

Por lo tanto, los complementos influyen en la salida y en cierto modo amplían la capacidad del compilador de paquetes web.

Los cargadores funcionan a nivel de archivo . Pueden escribir plantillas, procesar código para transpilarlo según su conveniencia, etc.

Los complementos funcionan a nivel de sistema . Pueden trabajar en patrones, manejo del sistema de archivos (nombre, ruta), etc.