So richten Sie Webpack für Anfänger ein

Beginnen Sie hier mit dem Schreiben … Webpack für Anfänger einrichten
Das erstmalige Einrichten von Webpack kann schwierig sein, in Bezug darauf, wo und wie Sie Ihre Dateien in der Reihenfolge anordnen, die es Webpack ermöglicht, sie erfolgreich in einer Hauptdatei zu bündeln.
Jetzt besteht der erste Schritt darin, das Webpack zu installieren. Sie können dies über die Befehlszeile tun und den folgenden Befehl ausführen
“npm install webpack”, oder wenn Sie stattdessen Garn verwenden “yarn add webpack”
Jetzt müssen Sie nach der Installation von webpack zu Ihrem Ordner package.json gehen und wenn es erfolgreich installiert wurde, sehen Sie, dass webpack beispielsweise auf die installierte Version zeigt; Webpaket: “^4.39.3”.
Jetzt besteht der nächste Schritt darin, einen Build in der Datei „package.json“ einzurichten und auf „watch“ zu setzen. Beispiel;

"scripts": {
"build": "webpack --watch"
}

dann besteht der nächste Schritt darin, eine Konfigurationsdatei einzurichten, dies ist die Datei, die Webpack untersuchen würde, um zu wissen, welche Dateien kompiliert werden, wo sie sich befinden, und die Datei, in der sie alles bündelt, Sie gehen zum Stammverzeichnis Ihrer App und richten “webpack .config.js”
dann müssten Sie nach dem Erstellen der Datei sie einrichten, indem Sie Folgendes ausführen:
Sagen wir das Skript, das Sie lesen möchten, die Daten, die gebündelt werden sollen, werden in einem src-Ordner abgelegt und aufgerufen
‘exampleScript.js’
und das Skript, in das jeder Code gebündelt werden soll, befindet sich in einem Ordner namens bundle und heißt
‘exampleBundleScript.js’
Wir führen den folgenden Befehl aus

const path = require('path');
module.exprots = {
    entry: ['./src/exampleScript.js'],
    output: {
        Path: path.resolve(__dirname, 'bundle'),
        filename: 'exampleBundleScript.js'
    }
};

Hinweis: Die Index-HTML-Datei muss im gleichen Ordner wie der Beispielordner bunndlescript.js abgelegt werden, der sich im Bundle-Ordner befindet.
Mit all diesen Schritten haben Sie nun Webpack erfolgreich eingerichtet.

Similar Posts

Leave a Reply

Your email address will not be published.