Als Front-End-„Belagerungslöwe“ ist Webpack nur allzu bekannt. Es kann alle Ressourcen (einschließlich JS, TS, JSX, Bilder, Schriftarten, CSS usw.) packen und in Abhängigkeiten platzieren . , sodass Sie auf Abhängigkeiten verweisen können, um Ressourcen entsprechend Ihren Anforderungen zu nutzen. Webpack hat hervorragende Arbeit bei der Übersetzung mehrerer Dateiressourcen im Frontend und der Analyse komplexer Modulabhängigkeiten geleistet. Wir können den Loader auch anpassen und unsere eigenen Ressourcen frei laden. Kommen Sie noch heute vorbei und schauen Sie sich das an.
1. Was ist erforderlich?
Wenn es um „require“ geht, denkt man vielleicht zuerst an „Import“, einen Syntaxstandard von es6
– „require“ ist ein Laufzeitaufruf, sodass „require“ theoretisch überall im Code verwendet werden
kann Aufruf, daher muss es am Anfang der Datei platziert werden.
Wenn wir Webpack zum Kompilieren verwenden, verwenden wir babel, um den Import in require() zu übersetzen . AMD und CMD verwenden auch die Methode require zum Referenzieren.
Zum Beispiel:
var add = require('./a.js');
In einfachen Worten: add(1,2)
erfordert tatsächlich eine Funktion und das referenzierte ./a.js ist nur ein Parameter der Funktion.
2. Was sind Exporte?
Hier können wir uns Exporte als ein Objekt vorstellen. Sie können die spezifische Verwendung des MDN-Exports sehen.
Schauen wir uns zunächst die Codestruktur an. Wir können feststellen, dass Anforderungen und Exporte nach der Verpackung angezeigt werden.
Nicht alle Browser können Require-Exporte ausführen. Sie müssen Require- und Exporte selbst implementieren, um den normalen Betrieb des Codes sicherzustellen. Der gepackte Code ist eine selbstausführende Funktion. Die Parameter enthalten Abhängigkeitsinformationen und der Code der Datei führt den Code durch Auswertung aus.
Die Gesamtkonstruktionszeichnung sieht wie folgt aus:
Schritt 1: Schreiben Sie unsere Konfigurationsdatei.
Die Konfigurationsdatei konfiguriert unseren gepackten Eintrag und die gepackte Exit-Ausgabe, um sie auf die nachfolgend generierten Dateien vorzubereiten.
const path = require("path");
module.exports = {
Eintrag: „./src/index.js“,
Ausgabe: {
Pfad: path.resolve(__dirname, "./dist"),//Die nach dem Packen ausgegebene Dateiadresse erfordert einen absoluten Pfad, daher ist ein Pfad erforderlich
Dateiname: „main.js“
},
Modus: „Entwicklung“ Schritt 2: Die Gesamtidee der Modulanalyse
: Zusammenfassend besteht es darin, die fs-Datei zu verwenden, um die Eintragsdatei zu lesen und den Pfad der importabhängigen Datei über AST zu erhalten Hat Abhängigkeiten, rekursieren Sie weiter, bis die Abhängigkeitsanalyse klar ist und in einer Karte verwaltet wird.
Detaillierte Aufschlüsselung : Einige Leute fragen sich vielleicht, warum AST mit dieser Funktion geboren wird. Seine ImportDeclaration kann uns helfen, die Importsyntax schnell herauszufiltern. Schließlich ist es auch möglich, die Datei zu verwenden String nach dem Lesen. Der tolle reguläre Ausdruck ist nützlich, um Dateiabhängigkeitspfade zu erhalten, aber er ist nicht elegant genug.
index.js file
import { str } from „./a.js“;
console.log(`${str} Webpack`) a.js-
Dateiimport { b} aus „./b.js“
export const str = „Hallo“ b.js-Datei
exportieren const b="bbb"
: Verwenden Sie @babel/parser von AST, um die aus der Datei gelesene Zeichenfolge in einen AST-Baum zu konvertieren, und @babel/traverse für Syntax Analysieren und verwenden Sie ImportDeclaration, um Importe herauszufiltern und Dateiabhängigkeiten zu finden.
const content = fs.readFileSync(entryFile, "utf-8");
const ast = parser.parse(content, { sourceType: "module" });
const dirname = path.dirname(entryFile);
const dependants = {};
traverse(ast, {
ImportDeclaration({ node }) {
//Importe herausfiltern
const newPathName = "./" + path.join(dirname, node.source.value);
abhängige[node.source.value] = newPathName;
}
})
const { code } = transformFromAst(ast, null, {
Voreinstellungen: ["@babel/preset-env"]
})
zurückkehren {
Eintragsdatei,
Angehörige,
Code
} Die Ergebnisse sind wie folgt:
Verwenden Sie Rekursion oder Schleife, um Dateien einzeln für die Abhängigkeitsanalyse zu importieren. Der Grund, warum Schleifen alle Abhängigkeiten analysieren können, ist, dass sich die Länge von Modulen ändert Neue Abhängigkeiten, module.length wird sich ändern.
for (let i = 0; i < this.modules.length; i++) {
const item = this.modules[i];
const {dependents} = item;
if (Angehörige) {
for (sei j in Abhängigen) {
this.modules.push(this.parse(dependents[j]));
}
}
} Schritt 3: Schreiben Sie die WebpackBootstrap-Funktion + generieren Sie
die WebpackBootstrap -Funktion : Das erste, was wir hier tun müssen, ist der Import unseres Quellcodes Wenn require nicht erkannt wird, müssen wir es zuerst deklarieren. Beim Schreiben von Funktionen müssen Sie auch auf die Bereichsisolierung achten, um eine Verschmutzung durch Variablen zu verhindern. Wir müssen die Exporte auch in unserem Code deklarieren, um sicherzustellen, dass die Exporte bereits vorhanden sind, wenn der Code ausgeführt wird.
Generieren Sie die Ausgabedatei : Wir haben die Adresse der generierten Datei bereits in die Konfigurationsdatei geschrieben und schreiben sie dann mit fs.writeFileSync in den Ausgabeordner.
Datei(Code) {
const filePath = path.join(this.output.path, this.output.filename)
const newCode = JSON.stringify(code);
// Bundle-Dateiinhalt generieren const bundle = `(function(modules){
Funktion require(module){
Funktion pathRequire(relativePath){
return require(modules[module].dependents[relativePath])
}
const exports={};
(function(require,exports,code){
eval(code)
})(pathRequire,exports,modules[module].code);
Rückexporte
}
require('${this.entry}')
})(${newCode})`;
// WebpackBoostrap
// Datei generieren. Legen Sie es im dist-Verzeichnis ab fs.writeFileSync(filePath,bundle,'utf-8')
} 
Schritt 4: Analysieren Sie die Ausführungssequenz
Wir können das gepackte Ergebnis in der Browserkonsole ausführen. Wenn es normal funktioniert, sollte Hello Webpack gedruckt werden.
Durch die obige Analyse sollten wir ein grundlegendes Verständnis des allgemeinen Prozesses von Webpack haben. Die Verwendung von AST zum Parsen des Codes ist nur eine Möglichkeit dieser Demonstration, und die eigentliche Implementierung von Webpack verfügt über eine eigene AST-Parsing-Methode Das Webpack-Ökosystem ist sehr umfassend. Interessierte Kinder können sich die folgenden drei Fragen stellen: