Configuración de entrada del concepto central de Webpack (entrada)

Si las dependencias de cada módulo del proyecto se consideran como un árbol, entonces la entrada es la raíz del árbol de dependencias.

Estos módulos dependientes se encapsularán en un fragmento al empaquetar. Entonces, ¿qué es un trozo?

Chunk significa literalmente bloque de código, que en Webpack puede entenderse como algunos módulos que se han abstraído y empaquetado. Es como una bolsa de archivos que contiene muchos archivos. Los archivos en el interior son cada módulo y Webpack agrega una capa de embalaje en el exterior para formar un fragmento:

Dependiendo de la configuración específica, se pueden generar uno o más fragmentos cuando se empaqueta un proyecto.

Se pueden definir varias entradas en el proyecto y cada entrada generará un recurso de resultado.

Por ejemplo, hay dos entradas en nuestro proyecto, src/index.js y src/lib.js . En circunstancias normales, dist/index.js y dist/lib.js .

En algunos casos especiales, una entrada puede generar múltiples fragmentos y, en última instancia, múltiples

entradas de paquetes.

Parámetros:

• la entrada es la entrada al módulo de configuración , que se puede abstraer en entrada. El primer paso de la ejecución de la compilación por parte de Webpack será buscar y analizar recursivamente todos los módulos dependientes de la entrada
• . completado, Webpack informará un error y saldrá

module.exports = {
	entrada:'./src/index.js', //Indica el archivo de entrada, es decir, ingresar a nuestro proyecto desde index.js}

tipo de entrada

Si es un tipo de matriz, cuando se usa con la salida. elemento de configuración de la biblioteca, solo el último en la matriz El módulo del archivo de entrada se exportará

② Nombre del fragmento

Webpack le dará un nombre a cada fragmento generado. El nombre del fragmento está relacionado con la configuración de la entrada:

• si la entrada. es una cadena o matriz, solo se generará un fragmento. En este momento, el nombre del fragmento es principal;
• si la entrada es un objeto, pueden aparecer varios fragmentos. clave en el par clave-valor del objeto.

③Dinámica de configuración de entrada

Si hay varias páginas en el proyecto, debe configurar una entrada para cada página, pero el número de estas páginas puede continuar creciendo, entonces la configuración de Entrada. se verá afectado por otros factores y no se puede escribir como un valor estático. La solución es configurar Entrada en una función para devolver dinámicamente la configuración mencionada anteriormente. El código es el siguiente:

// Entrada de función síncrona: () => {.
  devolver {
    a:'./páginas/a',
    b:'./páginas/b',
  }
};
// Entrada de función asincrónica: () => {
  devolver nueva Promesa((resolver)=>{
    resolver({
       a:'./páginas/a',
       b:'./páginas/b',
    });
  });
};

Parámetro: contexto

Webpack utilizará el contexto como directorio raíz cuando busque archivos con rutas relativas . El contexto predeterminado es el directorio de trabajo actual donde se inicia Webpack. Si desea cambiar la configuración predeterminada del contexto, puede configurarlo así en el archivo de configuración:

module.exports = {
	contexto: ruta.resolve(__dirname, 'aplicación')
}

Tenga en cuenta que el contexto debe ser una cadena de ruta absoluta.

configuración del archivo de entrada única

incorporando el parámetro webpack --context al iniciar Webpack.

Uso: entry:string|Array<string>

1. Sintaxis abreviada

webpack.config.js

//Dado que es único, se puede abreviar como:
módulo.exportaciones = {
  entrada: './main.js'
};

La configuración de entrada anterior en realidad se escribe con la siguiente abreviatura

module.exports = {
  entrada: {
    principal: './main.js'
  }
};

2.

Módulo de sintaxis de matriz.exportaciones = {
  entrada: {
    principal:['./main.js','./main2.js']
  }
};

La función de pasar una matriz es fusionar varios recursos por adelantado. Al empaquetar, Webpack usará el último elemento de la matriz como la ruta de entrada real.

Cuando se usa una cadena o matriz para definir una sola entrada, no hay ninguna entrada. forma de cambiar el nombre del fragmento, solo puede ser el "principal" predeterminado.

Configuración de archivos de entrada múltiple

Uso: entry: {[entryChunkName: string]: string|Array}

Sintaxis del objeto

module.exports = {
  entrada: {
    aplicación: './src/app.js',
    proveedores: './src/vendors.js'
  }
};

Esto será más engorroso. Sin embargo, esta es la forma más extensible de definir puntos de entrada en una aplicación.

"Configuración de paquete web extensible" : reutilizable y combinable con otras configuraciones. Esta es una técnica popular para separar las preocupaciones del entorno, el objetivo de compilación y el tiempo de ejecución. Luego combínalos usando herramientas especializadas como webpack-merge.

Escenarios de aplicación

1. Las aplicaciones de una sola página

, ya sean marcos, bibliotecas o módulos en cada página, son referenciadas por un único punto de entrada de app.js La ventaja de esto es que sólo se generará un archivo JS y las dependencias serán claras .

módulo.exportaciones = {
  entrada: './src/app.js'
};

Este método también tiene desventajas, es decir, todos los módulos se empaquetan juntos cuando la escala de la aplicación aumenta a un cierto nivel, el volumen de recursos generado será demasiado grande, lo que reducirá la velocidad de representación de la página del usuario

. configuración de Webpack, cuando un paquete tiene más de 250 kB (antes de la compresión), el paquete se considerará demasiado grande y se producirá una advertencia durante el empaquetado, como se muestra en la figura:

2. Separe la biblioteca de terceros (proveedor).

Para resolver el problema anterior, puede extraer la biblioteca de terceros (proveedor)

en Webpack, proveedor generalmente se refiere a terceros, como bibliotecas . y marcos utilizados por el proyecto. Bundle

module.exports = {
  entrada: {
    aplicación: './src/app.js',
    proveedores: ['react','react-dom','react-router'],
  }
};

Según el ejemplo de la aplicación, agregamos una nueva entrada con el nombre del fragmento vendor y colocamos los módulos de terceros de los que depende el proyecto en forma de matriz.

No configuramos la ruta de entrada para el proveedor

¿Qué debería hacer Webpack? ¿Qué pasa con el embalaje?

En este momento podemos usar CommonsChunkPlugin (CommonsChunkPlugin se abandonó después de Webpack 4, puede usar optimización.splitChunks) para extraer los módulos comunes en los dos fragmentos de aplicación y proveedor.

Con esta configuración, solo se generará el paquete generado por app.js. contiene El módulo empresarial y los módulos de terceros de los que depende se extraerán para generar un nuevo paquete, lo que también logra nuestro objetivo de extraer el proveedor.

Dado que el proveedor solo contiene módulos de terceros, esta parte no cambiará con frecuencia. Por lo tanto, el almacenamiento en caché del lado del cliente se puede utilizar de manera efectiva, lo que acelerará la velocidad de procesamiento general cuando el usuario solicite la página posteriormente.

CommonsChunkPlugin se utiliza principalmente para extraer bibliotecas de terceros y módulos públicos para evitar que los archivos agrupados cargados en la primera pantalla o los archivos agrupados cargados bajo demanda sean demasiado grandes, lo que resulta en tiempos de carga prolongados.

3. Aplicación de varias páginas

Para escenarios de aplicaciones de varias páginas, para reducir el tamaño de los recursos tanto como sea posible, esperamos que cada página solo cargue su propia lógica necesaria, en lugar de empaquetar todas las páginas en el mismo paquete. Por lo tanto, cada página necesita un paquete independiente . En este caso, utilizamos varias entradas para lograrlo. Consulte el siguiente ejemplo:

module.exports = {
  entrada: {
    páginaUno: './src/pageOne/index.js',
    páginaDos: './src/pageTwo/index.js',
    páginaTres: './src/pageThree/index.js'
  }
};

La configuración anterior le dice al paquete web que necesita 3 gráficos de dependencia independientes y separados. En este momento, la entrada y la página están en correspondencia uno a uno, de modo que cada HTML pueda cargar los módulos que necesita mientras los introduzca. su propio JS.