Eingabe, Ausgabe, Modulanalyse von webpack3.x
Dieses Mal werde ich Ihnen die Analyse des Eintrags, der Ausgabe und des Moduls von webpack3 vorstellen.
Als heute beliebtes Tool ist Webpack untrennbar mit den drei wichtigsten Front-End-Frameworks verbunden und muss daher erlernt werden.
Voraussetzungen: Es gibt eine Knotenumgebung und NPM-Tools ; (neue Version Der Knoten wird mit dem npm-Tool geliefert);
Beginnen wir Schritt für Schritt:
1. Wählen Sie zunächst ein Verzeichnis als Speicherort für Ihr Projekt
cmd Das Tool betritt das Projektverzeichnis (vorausgesetzt, meins ist D: webpack-demo4); dann verwenden Sie nmp
, umwebpack zu installieren: npm install webpack --save-dev („Globale Installation wird nicht empfohlen“) ; Verwenden Sie npm init, nachdem Sie Ihr Projektverzeichnis fertiggestellt haben, gefolgt von einigen beschreibenden Inhalten. Wenn Sie es weglassen möchten, verwenden Sie einfach npm init -y; Die Verzeichnisse dist und src werden von mir selbst erstellt, dist wird zum Speichern kompilierter Dateien verwendet und src wird zum Speichern von Quelldateien verwendet. In Zukunft werden alle Module im Zusammenhang mit der Projektkonstruktion neu initialisiert wird (und sollte) in diesem Verzeichnis abgelegt; webpack.config.js ist das Webpack-Konfigurationselement; .js-Konfiguration (so viele für den Moment) ;
Lassen Sie uns zunächst darüber sprechen, wofür diese Konfiguration verwendet wird. Sie erklärt Webpack, wie man sie verpackt durch eins;
Eintrag: Ja
Eintragsdatei; sprich über den relativen Pfad, der aus dem Verzeichnis berechnet wird, für das du die cmd-Befehlszeile verwendest; Mein Beispiel lautet:
[ webpack-demo4 ] --> Unten gibt es ein dist-Verzeichnis und ein src-Verzeichnis. Wenn ich dann die Konfiguration ausführe, sollte ich zu webpack-demo4 und dann zu webpack --config webpack gehen -config.js (oder direkt Webpack);
Es gibt zwei js-Dateien im src-Verzeichnis
Reden wir über etwas Wichtiges; /css/style1.css‘; es gibt style1.css unter css im oberen Verzeichnis (src) relativ zu index.js; ich habe zum Beispiel auch ein Bild unter img gespeichert ; und dann das Bild und print.js eingeführt:Befehl webpack in cmd; Die gepackten JS und Bilder werden im Verzeichnis dist angezeigt. Das obige Beispiel zeigt, wie Webpack CSS, Bilder und andere einfache Vorgänge verpackt. Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
<html>
<head>
<title>Output Management(输出)</title>
<meta charset=utf-8>
</head>
<body>
</body>
</html>
<script src="./js/app.bundle.js"></script>Wie VUE anmate.css verwendet
index.js
import _ from 'lodash';
import '../css/style1.css';
import icon1 from '../img/aa00.jpg';
import printMe from './print.js';
function component() {
var div = document.createElement('div');
var btn = document.createElement('button');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
var img = new Image();
img.src = icon1;
div.appendChild(img);
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
div.appendChild(btn);
return div;
}
document.body.appendChild(component()); //放回元素给到页面;So lösen Sie den IE11-CSS-Hack
Das obige ist der detaillierte Inhalt vonEingabe, Ausgabe, Modulanalyse von webpack3.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
ModuleNotFoundError: Wie behebt man den Fehler „Python-Modul nicht gefunden'?
Jun 25, 2023 pm 09:30 PM
Während des Entwicklungsprozesses von Python stoßen wir häufig auf Fehler, bei denen das Modul nicht gefunden wurde. Die spezifische Manifestation dieses Fehlers besteht darin, dass Python beim Importieren des Moduls einen von zwei Fehlern meldet: ModuleNotFoundError oder ImportError. Dieser Fehler ist sehr ärgerlich und kann die ordnungsgemäße Ausführung des Programms verhindern. In diesem Artikel werden wir uns daher mit den Ursachen dieses Fehlers und der Lösung befassen. ModuleNotFoundError und ImportError in Pyth
Modulare Programmiermethode für neue Java9-Funktionsmodule
May 19, 2023 pm 01:51 PM
In der Java9-Version führte die Java-Sprache ein sehr wichtiges Konzept ein: Modul. Wenn Sie mit der modularen Verwaltung von JavaScript-Code vertraut sind, sollten Sie sich vertraut fühlen, wenn Sie die modulare Verwaltung von Java 9 sehen. 1. Was ist Javamodule? Ähnlich wie Pakete in Java führen Module eine weitere Ebene der Gruppierung von Java-Code ein. Jede dieser Gruppen (Module) enthält viele Unterpakete. Deklarieren Sie den Ordner und seine Unterordner als Modul, indem Sie die Datei module-info.java zum Stammverzeichnis des Quellcodedateipakets eines Moduls hinzufügen. Die Dateisyntax
Front-End-Ausgabeeinstellungen
Feb 19, 2024 am 09:30 AM
Die Front-End-Ausgabekonfiguration erfordert spezifische Codebeispiele. In der Front-End-Entwicklung ist die Ausgabekonfiguration eine sehr wichtige Konfiguration. Es wird verwendet, um den Dateipfad, den Dateinamen und die zugehörigen Ressourcenpfade zu definieren, die nach dem Packen des Projekts generiert werden. In diesem Artikel werden die Rolle der Front-End-Ausgabekonfiguration, allgemeine Konfigurationsoptionen und spezifische Codebeispiele vorgestellt. Die Rolle der Ausgabekonfiguration: Das Ausgabekonfigurationselement wird verwendet, um den Dateipfad und den Dateinamen anzugeben, die nach dem Packen des Projekts generiert werden. Es bestimmt die endgültige Ausgabe des Projekts. Verpackt in Webpack usw.
Wie kann das Problem „Modulsicherung nicht gefunden' beim Mounten der NTFS-Festplatte unter einem Linux-System gelöst werden?
Dec 31, 2023 pm 03:17 PM
1. Bestätigen Sie zunächst den Linux-Systemkernel [root@localhost~]#uname-r-p2.6.18-194.el5i6862. Gehen Sie zu http://sourceforge.net/projects/linux-ntfs/files/, um das RPM-Paket herunterzuladen des entsprechenden Kernels. Wenn Sie nicht genau den gleichen finden, können Sie den nächstgelegenen finden. Ich konnte nicht genau dasselbe finden. Was ich heruntergeladen habe, ist: kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3. Installieren Sie das RPM-Paket rpm -ivhkernel -m
Ausgabe, das Kernkonzept von Webpack
Aug 09, 2022 pm 06:32 PM
Sobald Sie alle Ihre Assets zusammen haben, müssen Sie Webpack mitteilen, wo Ihre Anwendung gepackt werden soll. Das Ausgabeattribut von Webpack beschreibt, wie mit gebündeltem Code umgegangen wird. Der folgende Artikel vermittelt Ihnen ein detailliertes Verständnis der Ausgabe (Ausgabe) im Kernkonzept von Webpack. Ich hoffe, er wird Ihnen hilfreich sein!
Vuex-Modul – Einführung in die Verwendung der State-Warehouse-Partitionierung
Aug 10, 2022 pm 04:01 PM
Vuex besteht hauptsächlich aus den folgenden fünf Teilen: State, Getter, Mutation, Action und Module. Im Folgenden werde ich die Vuex-Modul-State-Warehouse-Segmentierung vorstellen, ich hoffe, dass sie für Freunde in Not hilfreich sein wird.
PHP gibt GD-Bild an Browser oder Datei aus
Mar 21, 2024 am 10:41 AM
In diesem Artikel wird ausführlich erläutert, wie PHP GD-Bilder in einen Browser oder eine Datei ausgibt. Der Herausgeber hält dies für recht praktisch, daher teile ich es Ihnen als Referenz mit und hoffe, dass Sie nach dem Lesen dieses Artikels etwas gewinnen können. PHP gibt GD-Bilder an einen Browser oder eine Datei aus. Einführung Die phpGD-Bibliothek bietet leistungsstarke Funktionen zur Bildverarbeitung, mit denen Sie Bilder erstellen, bearbeiten und ausgeben können. Bilder können zur Anzeige oder Weiterverarbeitung in einen Browser oder eine Datei ausgegeben werden. Ausgabe an den Browser Um ein Bild an einen Browser auszugeben, führen Sie die folgenden Schritte aus: Erstellen Sie eine Bildressource: Verwenden Sie die Funktion imagecreate(), um eine Bildressource zu erstellen. Bilddaten laden: imagepng(), imagejpeg() oder imagegif() verwenden
Schritte zum Exportieren von wps2019-Tabellen in Bilder
Mar 27, 2024 pm 04:51 PM
1. Öffnen Sie mit wps2019 die zu bearbeitende Tabelle. 2. Klicken Sie auf den Menüpunkt [Datei] in der oberen linken Ecke des wps2019-Fensters. 3. Klicken Sie im Dropdown-Menü der Popup-Datei auf den Menüpunkt [Als Bild exportieren]. 4. Es öffnet sich ein Fenster zur Ausgabe in Bilder. Wählen Sie im Fenster das Ausgabequalitätsformat aus. 5. Klicken Sie auf das Dropdown-Menü „Format“ und wählen Sie im Popup-Menü das Format aus, das Sie als Bild speichern möchten. 6. Klicken Sie abschließend auf die Optionsschaltfläche „Nach hinten speichern“, um den Speicherort festzulegen, an dem Sie das Bild speichern möchten. 7. Nachdem Sie auf OK geklickt haben, erscheint nach einer Weile eine Meldung, dass die Ausgabe erfolgreich war.
