Heim > Artikel > Web-Frontend > Eingabe, Ausgabe, Modulanalyse von webpack3.x

Eingabe, Ausgabe, Modulanalyse von webpack3.x

php中世界最好的语言Original: 2018-03-10 13:56:071927Durchsuche

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

, um

webpack 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) ;

Eingabe, Ausgabe, Modulanalyse von webpack3.x 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); Eingabe, Ausgabe, Modulanalyse von webpack3.x

Die Ausgabe ist Ausgabe der Einstellung: Das Ergebnis der obigen Einstellung ist, dass nach dem Packen des Webpacks app.bundle.js und print.bundle.js vorhanden sind im js-Ordner im dist-Verzeichnis generiert. Der Name ist eigentlich der Schlüssel im Modul. Speichert zwei Loader zum Laden von Dateien und CSS -loader css loader --save -dev und npm install file-loader --save -dev müssen vor dem Ausführen von webpack installiert werden. Ich muss in das Verzeichnis webpak-demo4 wechseln.

Jetzt habe ich einen index002. html von mir im dist-Verzeichnis geschrieben:

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 &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So wechseln Sie die Registerkarten in der Vue2-RegisterkarteNächster Artikel：So wechseln Sie die Registerkarten in der Vue2-Registerkarte

In Verbindung stehende Artikel

Mehr sehen