Cómo cargar módulos usando Webpack
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.