Cómo escribir un cargador en webpack 4
Para aprender webpack4 esta vez, no solo necesita poder configurar y recordar la API principal, sino también comprender mejor el conocimiento más profundo de webpack, como los principios de empaquetado, etc., por lo que algunos Es posible que se omita el contenido básico, pero espero que a través de este estudio pueda dominar el paquete web de manera competente y afrontar mejor el trabajo futuro.
1. Escriba un cargador de nivel básico
En el artículo anterior, básicamente entendí los conocimientos básicos de webpack. Ahora comenzaré con el cargador y revisaré más avanzado. Conocimiento del paquete web.
Primero inicializa un proyecto
npm init
Luego instala las dependencias
cnpm install -D webpack webpack-cli
Cree un directorio src y cree un index.js en él
Cree un nuevo paquete web .config.js y escriba la configuración básica
Si necesitamos reemplazar world con mark, lo cual podemos lograr a través del cargador. Primero, cree una nueva carpeta del cargador en el mismo nivel que el directorio src y cree un nuevo replaceLoader.js en ella.
replaceLoader.js necesita exportar una función. Nota: esta función no puede ser una función de flecha, porque el paquete web realizará algunos cambios al llamar al cargador. En algunos métodos, si se utilizan funciones de flecha, habrá problemas con el puntero y es imposible llamar a ciertos métodos.
Esta función puede aceptar un parámetro, que es el contenido de nuestro código fuente, por lo que puedes cambiar el código fuente devolviendo el código fuente después de hacer algo en el código fuente.
Luego use nuestro propio cargador, el uso no completará el nombre del cargador, debe escribir la ruta del cargador que escribimos.
Después del empaquetado, descubrimos que el mundo ha sido reemplazado por marcas, por lo que implementamos el cargador más simple.
2. Configurar parámetros para el cargador
El cargador generalmente puede configurar algunos parámetros, entonces, si queremos configurar parámetros, ¿qué debemos hacer?
En este punto, en replaceLoader, se puede acceder a los parámetros a través de this.query.
De esta manera, los resultados serán empaquetados y reemplazados con nuestros parámetros, pero la recomendación oficial es que usemos loader-utils para pasar parámetros.
cnpm install --save-dev loader-utils
Esto empaquetará los resultados con los mismos parámetros que pasamos.
3.this.callback
A veces no solo queremos devolver un recurso, es posible que también queramos devolver varios resultados, por lo que necesitamos utilizar la devolución de llamada.
this.callback(
err: error | null,
contenido: cadena | Buffer,
sourceMap?: SourceMap,
meta?: cualquiera
);
El primer parámetro es el error, el segundo parámetro es el resultado, el tercer parámetro es el mapa fuente y el cuarto parámetro Los parámetros pueden ser cualquier cosa (como metadatos)
4. En el cargador, si llamamos a setTimeout directamente, informará un error, entonces, ¿qué debemos hacer si queremos realizar operaciones asincrónicas?
Cuando desee utilizar operaciones asincrónicas, primero debe cambiar la devolución de llamada a this.callback y luego devolver el resultado (igual que this.callback).
De esta forma podrás empaquetarlo sin problemas.
Punto de conocimiento adicional: ahora necesitamos usar path.resolve al configurar el cargador. ¿Hay alguna manera de hacer referencia a él como a otros cargadores?
De esta manera, simplemente escriba el nombre del cargador y el paquete web buscará primero en node_modules y, si no lo encuentra, irá al cargador en el directorio actual.