paquete web (11 preguntas frecuentes de entrevistas bien pagadas) (20220401)

El cargador convierte archivos , inyecta ganchos a través de complementos y finalmente genera archivos compuestos por múltiples módulos. Webpack se enfoca en la construcción

Al crear proyectos modulares, webpack puede verse como un empaquetador de módulos : lo que hace es analizar la estructura de su proyecto y encontrar

Módulos de JavaScript y otros lenguajes extendidos (Scss, TypeScript, etc.) que los navegadores no pueden ejecutar directamente, y

Está empaquetado en un formato adecuado para que lo utilicen los navegadores.

2. ¿Cuáles son las ventajas de webpack? (deber)

1. Concéntrese en el manejo de proyectos modulares, sea capaz de usarlo de inmediato, en un solo paso

2. A través de la extensión del complemento, es completo y fácil de usar sin perder flexibilidad

3. Los escenarios de uso no se limitan al desarrollo web

4. La comunidad es enorme y activa, a menudo presenta nuevas funciones que se mantienen al día con el desarrollo de los tiempos y puede encontrar código abierto existente para la mayoría de los escenarios.

expandir

5. Proporciona una mejor experiencia de desarrollo

3. ¿Cuál es el proceso de construcción del paquete web?Desde la lectura de la configuración hasta el archivo de salida

Todo el proceso debe ser explicado tanto como sea posible (debe ser)

El proceso de ejecución de webpack es un proceso en serie. De principio a fin, los siguientes procesos se ejecutarán en secuencia:

1. Parámetros de inicialización : lea y fusione parámetros de archivos de configuración y declaraciones de shell para obtener parámetros finales

2. Comience a compilar : Inicialice el objeto Compiler con los parámetros obtenidos en el paso anterior, cargue todos los complementos configurados y ejecute

El método de ejecución del objeto inicia la compilación.

3. Determine la entrada : encuentre todos los archivos de entrada de acuerdo con la entrada en la configuración

4. Compile el módulo : comenzando desde el archivo de entrada, llame a todos los cargadores configurados para traducir el módulo y luego busque el módulo

Bloquee los módulos dependientes y luego repita este paso hasta que todos los archivos dependientes de la entrada hayan sido procesados en este paso

5. Completar la compilación del módulo : Después de traducir todos los módulos usando Loader en el paso 4, se traduce cada módulo .

El contenido final después de la traducción y las dependencias entre ellos.

6. Recursos de salida : de acuerdo con las dependencias entre la entrada y el módulo , ensámblelos en Chunks que contengan múltiples módulos,

Luego convierta cada Chunk en un archivo separado y agréguelo a la lista de salida.Este paso es la última máquina para modificar el contenido de salida.

Poder

7. Salida completada : después de determinar el contenido de salida, determine la ruta de salida y el nombre del archivo de acuerdo con la configuración , y escriba el contenido del archivo

En el sistema de archivos, en el proceso anterior, webpack transmitirá un evento específico en un momento específico, y el complemento está escuchando

Después del evento de interés, se ejecutará una lógica específica y el complemento puede llamar a la API proporcionada por el paquete web para cambiar el paquete web.

resultado de correr

4. Hable sobre el principio de actualización en caliente de webpack (debe ser)

1. Definición básica

La actualización en caliente de webpack también se denomina reemplazo en caliente (Hot Module Replacement), abreviado como HMR. esta maquina

Es posible reemplazar el módulo anterior con el módulo recién modificado sin actualizar el navegador .

2. Definición básica

2,1) El núcleo de HMR es que el cliente extrae el archivo actualizado del servidor , para ser precisos, chunk diff

(la parte del fragmento que debe actualizarse), de hecho, se mantiene un websocket entre WDS y el navegador , cuando se envía el recurso local

Cuando se producen cambios, WDS enviará la actualización al navegador y traerá el hash de la compilación para que el cliente pueda comparar con el último recurso.

Comparar

2,2) Después de que el cliente compare las diferencias, iniciará una solicitud Ajax a WDS para obtener el contenido modificado (lista de archivos,

hash), para que el cliente pueda usar esta información para continuar iniciando una solicitud jsonp a WDS para obtener el incremento del fragmento

renovar

2,3) Partes posteriores (¿cómo lidiar con las actualizaciones incrementales después de obtenerlas? ¿Qué estados deben mantenerse? ¿Cuáles deben actualizarse?

)

Completado por HotModulePlugin, proporciona API relevantes para que los desarrolladores las procesen en sus propios escenarios, como reaccionar

Tanto hot-loader como vue-loader usan estas API para implementar HMR

5. ¿Cuál es la diferencia entre webpack y grunt and gulp? (deber)

1. La diferencia entre los tres

Las tres son herramientas de construcción front-end, grunt y gulp eran más populares en los primeros días, y ahora webpack es relativamente más

La corriente principal, pero algunas tareas livianas seguirán siendo manejadas por gulp, como empaquetar archivos CSS por separado, etc.

1,1) grunt y gulp se basan en tareas y flujos (Tarea, Flujo). Similar a jQuery, encuentre uno (o

Un archivo de clase), realice una serie de operaciones en cadena en él, actualice los datos en el flujo, toda la operación en cadena constituye una tarea, múltiples

Las tareas constituyen todo el proceso de construcción de la web.

1,2) el paquete web se basa en la entrada. webpack resolverá automáticamente de forma recursiva todos los recursos que la entrada necesita cargar

Archivos de origen, luego use diferentes cargadores para procesar diferentes archivos y use el complemento para ampliar la funcionalidad del paquete web.

2. Diferencias en las ideas de construcción.

2,1) gulp y grunt requieren que los desarrolladores dividan todo el proceso de compilación del front-end en múltiples `Tareas` y controlen razonablemente todas

Hay una relación de llamada de 'Tarea'

2,2) el paquete web requiere que los desarrolladores encuentren la entrada y necesiten saber qué usar para diferentes recursos

¿Qué tipo de análisis y procesamiento hace Loader?

3. Diferencias con el conocimiento previo

3,1) Gulp es más como la idea de un desarrollador de back-end, y necesita conocer bien todo el proceso

3,2) el paquete web se inclina más por las ideas de los desarrolladores front-end

6. ¿Cuáles son los cargadores comunes? ¿Qué problema están resolviendo? (deber)

1. cargador de archivos: envíe el archivo a una carpeta y consulte el archivo de salida a través de la URL relativa en el código

2. cargador de URL: similar al cargador de archivos, pero puede convertir archivos en formato base64 cuando los archivos son pequeños

El contenido se inyecta en el código.

3. source-map-loader: cargue archivos de mapas de origen adicionales para facilitar la depuración de puntos de interrupción

4. cargador de imágenes: carga y comprime archivos de imagen

5. babel-loader: convertir ES6 a ES5

6. css-loader: Cargue CSS, admita modularización, compresión, importación de archivos y otras características

7. cargador de estilo: inyecte código CSS en JavaScript y cargue CSS a través de la manipulación DOM

8. eslint-loader: inspecciona el código JavaScript a través de ESLint

7. ¿Cuál es la diferencia entre Loader y Plugin? (deber)

1. Diferentes funciones

1,1) Loader se traduce literalmente como "loader" . webpack trata todos los archivos como módulos, pero webpack de forma nativa es

Solo puede analizar archivos js. Si desea empaquetar otros archivos, usará el cargador. Así que el papel de Loader es dejar

webpack tiene la capacidad de cargar y analizar archivos que no son de JavaScript.

1,2) El complemento se traduce literalmente como "complemento" , el complemento puede ampliar las funciones del paquete web, de modo que el paquete web tenga más

flexibilidad _ Durante el ciclo de vida de la ejecución del paquete web, se transmiten muchos eventos y el complemento puede escuchar estos eventos.

El momento adecuado para cambiar la salida a través de la API proporcionada por webpack

2. Uso diferente

2,1) El cargador está configurado en module.rules, lo que significa que existe como una regla de análisis para un módulo . Tipos de

Para una matriz, cada elemento es un Objeto, que describe qué tipo de archivo (prueba) y qué cargar

(cargador) y los parámetros utilizados (opciones)

2,2) El complemento se configura por separado en complementos . El tipo es una matriz y cada elemento es una instancia de un complemento.

Los números se pasan a través del constructor.

8. La diferencia entre webpack3 y webpack4 (debe ser)

1. El parámetro modo/--modo, el parámetro modo/--modo se agrega para indicar si es desarrollo o producción

(desarrollo/producción)

2. Producción, centrándose en el tamaño del archivo después del empaquetado, desarrollo centrándose en goujiansud

3. Para eliminar cargadores se deben usar reglas (en la versión 3 coexisten cargadores y reglas, pero en la versión 4

Cuando solo se permiten reglas

4. Se eliminó CommonsChunkPlugin (extraer código común), use optimización.splitChunks,

optimización.runtimeChunk en su lugar

5. Admite la forma es6 de importar archivos JSON y puede filtrar código inútil

let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json' // 打包时只会把 first 相关的打进去

6. Actualice el complemento happypack (happypack puede realizar un empaquetado acelerado de subprocesos múltiples)

Ajuste de ExtractTextwebpackPlugin, se recomienda usar el nuevo archivo CSS para extraer el complemento kiii mini-css-extract

complemento, modo de producción, minimizador de aumento

9. Introduce las funciones de bundle, chunk y module respectivamente

(Debemos reunirnos)

1. Módulo: cada archivo en desarrollo puede considerarse como un módulo. Los módulos no se limitan a js, sino que también incluyen css.

fotos, etc

2. Chunk: representa un bloque de código, un fragmento puede estar compuesto por varios módulos

3. paquete: el archivo empaquetado final generalmente tiene una correspondencia uno a uno con el fragmento.

Chunk es la salida después de compilar, comprimir, empaquetar, etc.

10. Cómo utilizar el paquete web para optimizar el rendimiento de la interfaz de usuario (preguntas frecuentes sobre pagos elevados)

1. Comprime el código. uglifyJsPlugin comprime código js, mini-css-extract-plugin comprime código css

2. Usando la aceleración de CDN, modifique los recursos estáticos referenciados a las rutas correspondientes en el CDN, puede usar el paquete web para

Use el parámetro de salida y el parámetro publicpath del cargador para modificar la ruta del recurso

3. Elimine el código muerto (temblor de árboles), css necesita usar Purify-CSS

4. Extraiga el código público. webpack4 eliminó CommonsChunkPlugin (extrae código común), usando

optimización.splitChunks y optimización.runtimeChunk en su lugar

11. ¿Has escrito Loader y Plugin? Describir escribir un cargador o

¿La idea del complemento? (Salario alto Preguntas Frecuentes)

1. Definición básica

Loader es como un "traductor" para escapar del contenido del archivo de origen leído al nuevo contenido del archivo , y cada Loader

Mediante operaciones de encadenamiento, los archivos de origen se traducen paso a paso al aspecto deseado.

2. Escribir ideas

2.1 ) Siga un solo principio al escribir Loaders , cada Loader solo hace un tipo de trabajo de "escape" , cada uno

Lo que obtiene Loader es el contenido del archivo fuente (fuente ), que puede generar el contenido procesado devolviendo un valor , o

Para llamar al método this.callback(), devuelva el contenido al paquete web y genere una devolución de llamada a través de this.async()

función, y luego use esta devolución de llamada para generar el contenido procesado.Además, webpack también prepara a los desarrolladores para el desarrollo

conjunto de funciones de utilidad del cargador - loader-utils

2.2) En comparación con Loader, la escritura de Plugin es mucho más flexible y el paquete web está en el ciclo de vida en ejecución

Habrá muchos eventos transmitidos en el complemento, y el complemento puede escuchar estos eventos y cambiarlos a través de la API proporcionada por el paquete web en el momento adecuado.

cambiar salida

3. Precauciones para escribir

3.1) Loader admite llamadas en cadena, por lo que el desarrollo debe seguir estrictamente la "responsabilidad única", cada Loader

Sólo responsable de lo que necesita ser responsable

3.2) El cargador se ejecuta en node.js, podemos llamar a cualquier API que venga con node.js o instalarlo

Los módulos de terceros hacen llamadas

3.3) El contenido original pasado por webpack a Loader es una cadena codificada en formato UTF-8 .

Cuando Loader procesa archivos binarios, necesita decirle a webpack si Loader necesita pasar exportaciones.raw = true

datos binarios

3.4 ) Cargador asíncrono tanto como sea posible, si la cantidad de cálculo es pequeña, la sincronización también puede ser

3.5) El cargador no tiene estado, no debemos mantener el estado en el cargador

3.6) Use las utilidades provistas por loader-utils y schema-utils

3.7) Cargar el método Loader local