Cómo utilizar el mecanismo de carga de código fuente del paquete web
El concepto de cargador
Un cargador se utiliza para cargar y procesar varias formas de recursos. Es esencialmente una función que acepta archivos como parámetros y devuelve la estructura convertida.
El cargador se utiliza para convertir el código fuente del módulo. Los cargadores le permiten preprocesar archivos al importar o "cargar" módulos. Como tal, los cargadores son similares a las "tareas" de otras herramientas de compilación y proporcionan una forma poderosa de manejar los pasos de compilación del front-end. El cargador incluso le permite convertir el código fuente de un módulo a JavaScript o imágenes en línea en URL de datos. ¡URLs.loader incluso te permite importar archivos CSS directamente desde módulos JavaScript!
La diferencia entre cargadores y complementos
Anteriormente presentamos el mecanismo de complemento. Hoy echamos un vistazo a los cargadores. Juntos, amplían enormemente la funcionalidad del paquete web. La diferencia entre ellos es que un cargador se usa para transformar el código fuente de un módulo, mientras que un complemento está diseñado para hacer otras cosas que un cargador no puede. ¿Por qué decir tanto? Debido a que los complementos se pueden invocar en cualquier etapa, la salida del cargador se puede procesar aún más entre los cargadores, activando eventos durante el tiempo de ejecución de la compilación, ejecutando devoluciones de llamadas preregistradas y haciendo cosas más básicas con objetos compilados.
Uso del cargador
Configuración
Módulo: {
reglas: [
{
prueba：/\.css$/,
uso: [p> {
cargador: 'css-loader'
}
]
}
]
}
} en línea
importar estilos desde 'estilo - ¡cargador!css-loader?módulos! /styles.css';CLI
webpack --module-bind 'css=style-loader!css-loader' Explicación Los tres métodos funcionan encadenando un conjunto de cargadores, se ejecutan en orden desde de derecha a izquierda, con el primer cargador de la cadena devolviendo un valor al siguiente cargador. css-loader se usa primero para analizar el contenido CSS especificado en las rutas @import y url(), y luego style-loader se usa para insertar el código CSS original en las etiquetas de estilo de la página.
Implementación del cargador
//Insertar CSS en la etiqueta principal
module.exports = function (fuente) {
let script = (`
let style = document.createElement("estilo");
style.innerText = ${JSON.stringify(source)};
documento .head.appendChild(estilo);
`);
script de retorno;
}
//Uso 1
resolveLoader: {
módulos: [path.resolve('node_modules'), path.resolve(__dirname, 'src' Luego agregue las dependencias y úselas como se describe en el método 1. Lo anterior Es una implementación simple del cargador, ejecutada de manera sincrónica, lo que equivale a realizar la función del cargador de estilos.
Principio del cargador
función iteratePitchingLoaders(opciones, loaderContext, callback) {
var currentLoaderObject = loaderContext.loaderIndex];
// módulo cargador
loadLoader(currentLoaderObject, function(err) {
var fn = currentLoaderObject.pitch;
runSyncOrAsync(
fn ,
loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
// loaderContext.data = {}],
function(err) {
if(err) return callback(err);
var args = Array.prototype .slice.call(argumentos, 1);
if(args.length gt; 0) {
loaderContext.loaderIndex--;
iterateNormalLoaders(opciones, loaderContext, args, callback);
} else {
iteratePitchingLoaders(opciones, loaderContext, devolución de llamada
}
}
}
); ); <
});
} Creo que domina este método después de leer este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados de Gxl net.
Lectura recomendada:
Cómo usar Sortable en Vue
Cómo usar JS para implementar la sobrecarga de operadores