Red de conocimiento informático - Material del sitio web - Cómo cargar módulos usando Webpack

Cómo cargar módulos usando Webpack

Este artículo presenta principalmente cómo Webpack carga módulos. El contenido no es malo. Ahora lo compartiré contigo y te daré una referencia.

Webpack es muy popular entre los desarrolladores como herramienta de empaquetado de módulos en el desarrollo front-end. Sus cargadores enriquecidos le permiten implementar una variedad de funciones. En este artículo, usaremos Webpack para empaquetar un archivo js y veremos cómo Webpack carga cada módulo.

Dos archivos fuente simples

Para analizar cómo el paquete web carga los módulos, preparamos dos archivos:

hello.js

const hola = {

decir: arg =gt; {

console.info(' hola ' arg || 'mundo'); >

};

exportar saludo predeterminado; index.js

importar saludo desde './hola';

Hola.say(' hombre' ); index.js sirve como archivo de entrada y hace referencia al módulo hello.js.

Empaquetado de paquetes web

La ejecución de webpack index.js Bundle.js en la línea de comando empaquetará el archivo de entrada y generará Bundle.js. js, su estructura es la siguiente (eliminé algún código redundante para facilitar la lectura):

Puedes ver que el archivo generado termina con (función (módulos) {})([módulo1, módulo2]) Al principio, el módulo que definimos se encapsula en una función anónima y se pasa a una función anónima (módulos) {} en forma de matriz, que define una función __webpack_require__() para cargar el módulo. Finalmente, cargue el primer módulo index.js devolviendo __webpack_require__(__webpack_require__.s = 0);

Función __webpack_require__()

Esta función toma moduleId como parámetro.

Este parámetro es el índice de cada módulo en la matriz,

función __webpack_require__(moduleId) {

/******/

/** * ***/ // Comprobar si el módulo está en la caché

/***** */

if (installedModules[moduleId]) {

/ ******/

return installModules[moduleId].exports;

/******/

}

/******/ // Crea un nuevo módulo (y ponlo en caché)

/******/

var module = módulosinstalados [móduloId] = {

/******/

i: móduloId,

/******/

l: falso,

/******/

exporta: {}

/******/

};

/******/

/******/

// Ejecutar módulo función

/******/

módulos[moduleId].call(module.exports, module, module.exports, __webpack_require__);<

/ ******/

/******/ // Marcar el módulo como cargado

/******/

module.l = true;

/******/

/******/

// Devuelve el exportación del módulo

/******/ // Devolver exportaciones del módulo

/******/

devolver módulo.exportaciones ;

p>

/******/

}donde installModules se utiliza para almacenar en caché los módulos ejecutados.

Parámetros aceptados por el módulo

Tome el módulo hello.js como ejemplo

(función (módulo, __webpack_exports__, __ webpack_require__) {

"use estricto";

const hola = {

decir: arg =gt; {

console.info('hola ' arg || ' world' );

}

};

/* Exportación predeterminada de Harmony*/

__webpack_exports__["a"] = ( hola) ;

/***/

})webpack pasa tres parámetros al módulo, __webpack_exports__ y __webpack_require__. Los dos primeros parámetros se utilizan para exportar variables en el módulo. y el tercero El parámetro es una referencia a __webpack_require__() introducido anteriormente, que se utiliza para importar otros módulos.