Conceptos básicos del front-end web ¿Cuál es el principio de empaquetado de webpack?
Básicamente, webpack es una herramienta de empaquetado de módulos estáticos basada en la plataforma de nodo que utiliza las diversas API de nodo para implementar aplicaciones JavaScript.
Durante el proceso de empaquetado, se crean dependencias y las referencias de los módulos se preprocesan y almacenan en caché.
2. Análisis
1. Archivo de población
// mian.js
const a = require('. /m1' )
const b = require('. /m2')
importar {prueba} desde '.
console.log(prueba)
//m2.js
exportar valor predeterminado {
b:2
}
//m1.js
exportar prueba constante = {prueba:1}
exportar valor predeterminado {
a:1
}
2 .Generar archivos
(función (módulos) {
var installModules = {}; //cache
/*
* Cargar Función del módulo
* Pasar el ID del módulo
* *
function __webpack_require__(moduleId) {
// Comprobar si el módulo está almacenado en caché en
if (installedModules[moduleId]) {
return installledModules[moduleId].exports;
}
// Crear un nuevo módulo y almacenarlo en caché
var module = installModules[moduleId] = {
moduleId,
l: false,
exporta: {}
};
// Llamar funciones del módulo, módulos
módulos[moduleId].call(module .exports, module. module.exports, __webpack_require__);
module.l = true;
// Devuelve el módulo correspondiente
return module.exports;
}
__webpack_ require__.m = módulos;
__webpack_require__.c = módulos instalados;
__webpack_require__.d = función (exportaciones, nombre, captador) {
if (! __webpack_require__.o(exportaciones, nombre)) {
Object.defineProperty(exportaciones, nombre, {
configurable: falso, p>
enumerable: verdadero,
obtener: getter
});
}
};
__webpack_require__.n = función (módulo) {
var getter = módulo && módulo .__esModule ?
función getDefault() {
devolver módulo['default'];
}:
función getModuleExports() {
módulo de retorno;
}
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = función (objeto, propiedad) {
return Objeto. prototipo.hasOwnProperty.call(objeto, propiedad);
};
__webpack_require__.p = "";
// Cargar archivo de entrada
return __webpack_require__(__webpack_require__.s = 0);
})
([
(función (módulo, exportaciones, __webpack_require__) {< / p>
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(función (módulo, __webpack_exports__, __webpack_require__, __webpack_exports__, __webpack_exports__, __webpack_exports__, __webpack_exports__)__webpack_require__) {
"uso estricto";
Object.defineProperty(__webpack_exports__, "__esModule", {valor: verdadero}); /p>
__webpack_exports__["default"] = ({
a: 1
});
}),
(función (módulo, __webpack_exports__, __webpack_require__) {
"usar estricto";
Object.defineProperty(__webpack_exports__, "__esModule", {valor: true});
__webpack_exports__["default"] = ( {
b: 2
});
})
]);
Al observar el código anterior, obtendrá los siguientes resultados:
1. El código empaquetado es una función que se puede ejecutar inmediatamente y el parámetro pasado es un array
2. La matriz de parámetros es el módulo al que queremos hacer referencia
3. La posición de la matriz correspondiente a cada módulo es la identificación del módulo
4. Cargue el archivo de entrada en la función inmediata y ejecútelo
__webpack_require__: cargue y ejecute un módulo y almacene en caché el módulo en installModules.
modules[moduleId].call(mo).
dule.exports, module, module.exports, __webpack_require__);
Aquí se ejecuta un módulo referenciado.
Y agregue módulo, exporte y requiera al módulo.
Es por eso que configuramos la variable global module/exports/require en el módulo
Al analizar el archivo de empaquetado, básicamente se puede comprender completamente el proceso de empaquetado.