Ausgabe: Durch Konfigurieren der Ausgabeoption kann gesteuert werden, wie Webpack kompilierte Dateien auf die Festplatte schreibt. Beachten Sie, dass, obwohl mehrere Einstiegspunkte vorhanden sein können, nur eine Ausgabekonfiguration angegeben wird.
Wir initialisieren zunächst ein Projekt npm init , installieren webpack und webpack-cli lokal, erstellen dann die Ordner index.html , webpack.config.js und src im Stammverzeichnis und erstellen im Ordner eine main.js als Eintragsdatei
Nach Abschluss der Vorbereitungsarbeiten sieht es wie in der Abbildung dargestellt aus:
main.js
-Funktion Component(){
var div=document.createElement('div')
div.innerHTML="Lassen Sie uns gemeinsam die Exportkonfiguration lernen~"
Return-Div
}
document.body.appendChild(Component()) index.html
<body>
<script src="./dist/bundle.js"></script>
</body> packag.json
„scripts“: {
"test": "echo "Fehler: kein Test angegeben" && Exit 1",
„build“: „webpack“ // } hinzufügen, dann der Konfigurationsteil: webpack.config.js
Durch Konfigurieren der output kann gesteuert werden, wie Webpack kompilierte Dateien auf die Festplatte schreibt.
Beachten Sie, dass auch wenn mehrere入口vorhanden sein können, nur eine输出angegeben wird.
Im Folgenden sind mehrere Konzepte der Ausgabekonfiguration aufgeführt:
1.
Pfadpfad gibt den Speicherort der Ressourcenausgabe an, und der erforderliche Wert muss ein absoluter Pfad sein , z :
const path=require(' path')
module.exports={
Eintrag:'./src/main.js',
Ausgabe:{
Dateiname:'bundle.js',
//Setzen Sie den Speicherort der Ressourcenausgabe auf den dist-Verzeichnispfad des Projekts: path.resolve(__dirname, 'dist')
},
} Nach Webpack 4 ist „output.path“ standardmäßig das Verzeichnis „dist“ . Sofern wir es nicht ändern müssen, besteht keine Notwendigkeit, es separat zu konfigurieren. Wenn es sich also um Webpack4 oder höher handelt, können Sie Folgendes schreiben:
module.exports={
Eintrag:'./src/main.js',
Ausgabe:{
Dateiname:'bundle.js',
},
} 2. Dateiname
Die Funktion von Dateiname besteht darin, den Dateinamen der Ausgaberessource zu steuern , der in Form einer Zeichenfolge vorliegt. Hier nenne ich es bundle.js , was bedeutet, dass die Ressourcen in einer Datei namens bundle.js ausgegeben werden sollen:
module.exports={
Eintrag:'./src/main.js',
Ausgabe:{
Dateiname:'bundle.js',
},
} Nach dem Packen wird, wie in der Abbildung gezeigt, automatisch ein dist -Ordner mit einer bundle.js Datei darin generiert.
Dateiname kann nicht nur der Name des Bundles sein, sondern auch ein relativer Pfad.
Es spielt keine Rolle,
ob Webpack das Verzeichnis bei der Ausgabe von Ressourcen erstellt.
Ausgabe: {
Dateiname: './js/bundle.js',
},
}; Wie im Bild nach dem Verpacken gezeigt:
In einem Szenario mit mehreren Einträgen müssen wir für jedes generierte Bundle einen anderen Namen angeben. Dazu verwenden wir ein vorlagensprachliches Formular, um Dateinamen dynamisch zu generieren .
Zuvor erstellen wir eine neue Eintragsdatei in src
.
Funktion Component(){
var div=document.createElement('div')
div.innerHTML="Ich bin die zweite Eintragsdatei"
Return-Div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
Eintrag:{
main:'./src/main.js',
vender:'./src/vender.js'
},
Ausgabe: {
Dateiname: '[Name].js',
},
}; Wie im Bild nach dem Verpacken gezeigt:
[name] im Dateinamen wird durch den Chunk-Namen ersetzt, nämlich „main“ und „vendor“. Daher werden am Ende vendor.js und main.js generiert
. Wenn Sie den Inhalt sehen möchten, müssen Sie den Inhalt in index.html ändern und den Pfad zum letzten gepackten Bundle
<body>anpassen
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Frage] Zu diesem Zeitpunkt besteht Bedarf. Wie können wir dafür sorgen, dass
index.htmldas generierte Bundle automatisch zu HTML hinzufügt? Das Plug-in HtmlWebpackPlugin kann hier verwendet werden. Weitere Informationen finden Sie weiter unten.
Zusätzlich
zu [name] , das sich auf den Chunk-Namen beziehen kann, gibt es mehrere andere Vorlagenvariablen, die in der Konfiguration von filename verwendet werden können:
können: den Client-Cache steuern
. [hash] und [chunkhash] stehen in direktem Zusammenhang mit dem Chunk-Inhalt. Wenn sich der Chunk-Inhalt ändert, kann dies auch dazu führen, dass sich der Name der Ressourcendatei ändert dass der Benutzer bei der nächsten Anforderung der Ressourcendatei sofort die neue Version herunterlädt, ohne den lokalen Cache zu verwenden.
Auch [query] kann einen ähnlichen Effekt haben, hat aber nichts mit dem Chunk-Inhalt zu tun und muss vom Entwickler manuell angegeben werden.
4. publicPath
publicPath ist ein sehr wichtiges Konfigurationselement, das verwendet wird, um den Anforderungsort von Ressourcen anzugeben.
Nehmen Sie das Laden von Bildern
aus „./img.jpg“.
Funktionskomponente() {
//......
var img = neues Bild();
myyebo.src = Img //Anfrage-URL
//......
} {
//......
Abfrage: {
Name: '[Name].[ext]',
Ausgabepfad: 'static/img/',
publicPath: './dist/static/img/'
}
} Wie im obigen Beispiel gezeigt, lautet die ursprüngliche Bildanforderungsadresse ./img.jpg , aber nach dem Hinzufügen von publicPath zur Konfiguration wird der tatsächliche Pfad zu ./dist/static/img/img.jpg , sodass Bilder von abgerufen werden können Gepackte Ressourcen.
Es gibt drei Formen von publicPath:
HTML
angeben. Der Pfad des HTML-Codes der aktuellen Seite wird zur Bildung der tatsächlichen URL hinzugefügt
//Angenommen, die aktuelle HTML-Adresse lautet: https://www.example.com/app/index.html //Die asynchron geladene Ressource heißt 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:../assets/" //-->https://www.example.com/assets/1.chunk.js
Host bezogen
Wenn der Wert von publicPath mit „/“ beginnt, bedeutet dies, dass der publicPath bei Dieses Mal beginnt mit Der Hostname der aktuellen Seite ist der Basispfad
// Angenommen, die aktuelle HTML-Adresse lautet: https://www.example.com/app/index.html //Die asynchron geladene Ressource heißt 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN-bezogen
Die beiden oben genannten sind relative Pfade, um publicPath zu
konfigurieren Diese Situation tritt im Allgemeinen auf, wenn statische Ressourcen im CDN platziert werden. Da der Domänenname nicht mit dem Domänennamen der aktuellen Seite übereinstimmt, muss er in Form eines absoluten Pfads
oder eines relativen
Pfads angegeben werdenProtokoll bedeutet, dass der aktuelle Pfad CDN-bezogen ist
//Angenommen, die aktuelle HTML-Adresse lautet: https://www.example.com/app/index.html //Die asynchron geladene Ressource heißt 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Einzeleingang
Die Mindestanforderung für die Konfiguration des output im Webpack besteht darin, seinen Wert auf ein Objekt festzulegen, einschließlich der folgenden zwei Punkte:
filename ist der Dateiname der Ausgabedatei.path des Zielausgabeverzeichnispfadsmodule.exports={
Eintrag:'./src/main.js',
Ausgabe:{
Dateiname:'bundle.js',
},
}
//Nach Webpack 4 wird standardmäßig der Pfad generiert. 2. Mehrere Einträge
Wenn die Konfiguration mehrere separate „Blöcke“ erstellt, sollten Sie Platzhalter verwenden, um sicherzustellen, dass jede Datei einen eindeutigen Namen
hat Hier wird [name] des genannten Dateinamens verwendet.
Wenn Sie diese Ressourcen im angegebenen Ordner ablegen möchten, können Sie außerdem die path
module.exports={ hinzufügen.
Eintrag: {
main: './src/main.js',
Anbieter: './src/vender.js'
},
Ausgabe: {
Dateiname: '[Name].js',
Pfad: __dirname + '/dist/assets' //Angeben, dass das gepackte Bundle im Verzeichnis /dist/assets abgelegt wird}
}
// Nach dem Packen generieren: ./dist/assets/main.js, ./dist/assets/vender.js Die verbleibenden Probleme oben in diesem Kapitel können durch die Verwendung des Plug-Ins HtmlWebpackPlugin gelöst werden
Installieren Sie das Plug-
in npm install --save-dev html-webpack-plugin
konfigurieren Sie das Plug-in
const HtmlWebpackPlugin=require('html-webpack-plugin') //Modul laden module.exports = {
Eintrag:{
main:'./src/main.js',
vender:'./src/vender.js'
},
//Plugins hinzufügen:[
neues HtmlWebpackPlugin({
Titel:'Output-Management'
})
],
Ausgabe: {
Dateiname: '[Name].js',
},
}; Nach Abschluss des Pakets
werden Sie feststellen, dass in dist eine neue index.html angezeigt wird, die die generierten Ressourcen automatisch für uns hinzufügt. Nach dem Öffnen werden Sie feststellen, dass der Browser den Inhalt anzeigt.
Dies bedeutet, dass Sie index.html in Zukunft nicht mehr schreiben müssen, wenn Sie ein Projekt initialisieren.
Den Quellcode erhalten Sie hier:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. Dateien