Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Als ich heute webpack verwendet habe, um die Umgebung manuell zu erstellen, traten verrückte Fehler auf und ich konnte lange Zeit nicht mit dem nächsten Schritt fortfahren.

Konfigurieren Sie zuerst package.json

//Npm init -y automatisch konfigurieren

Alles ist gut

Installieren Sie dann das Webpack-Tool

npm installiere webpack webpack-cli --save-dev
  //Oder npm i webpack webpack-cli -D ist auch OK

Ausführen von Webpack-Tests

Bei diesem Schritt, als ich webpack in die Befehlszeile eingab und die Eingabetaste drückte, begann es wie verrückt Fehler zu melden

Dann ist es am schnellsten, die Datei zu löschen und neu zu installieren. Nach einem erneuten Versuch wird immer noch derselbe Fehler gemeldet, was verwirrend ist.

Nachdem ich webpack -V ausgegeben hatte, stellte ich fest, dass nicht einmal die Versionsnummer ausgegeben wurde. Später dachte ich, dass es vielleicht daran liegen könnte, dass webpack nicht global installiert war. Ich denke, das ist das unwahrscheinlichste Problem, da ich es schon einmal verwendet habe.

Installieren Sie dann webpack und webpack-cli neu oder befolgen Sie die vorherigen Anweisungen und erstellen Sie die src-Datei manuell

4. Führen Sie Webpack-Tests aus

CommonJS-Spezifikation: basierend auf serverseitiger Modularisierungsspezifikation, Knotenausgabe

Wirft: module.exports
Importieren: erforderlich

ES6-Modul:

importiere xxx von ''
Standard exportieren {}

Da webpack standardmäßig nur die Einführung von JS- und JSON-Dateien unterstützt, müssen Sie einen geeigneten Loader zum Parsen installieren, wenn Sie andere Dateitypen wie .css .png.html in JS einführen möchten.

Konfigurieren Sie verschiedene Loader (Dateiparser).

Installieren Sie Babel im Zusammenhang

Installieren Sie Babel und reagieren Sie auf zugehörige Loader

cnpm ich babel-loader @babel/core @babel/preset-env -D

CSS-Loader installieren

npm ich CSS-Loader Stil-Loader -D
cnpm ich CSS-Loader Stil-Loader -D

Installieren Sie das HTML-Plugin

npm ich html-webpack-plugin -D
cnpm ich html-webpack-plugin -D

PS: [Unterschiede zwischen in der Entwicklungsumgebung und der Produktionsumgebung installierten Abhängigkeiten]

Entwicklungsumgebung, d. h. die in der Codierungsphase des Projekts erforderlichen Abhängigkeiten, auf die nach dem Onlinegehen nicht mehr verwiesen werden muss, wie z. B. Webpack-Build-Tools, Babel-Loader usw., die mit dem Befehl --save-dev oder -D installiert werden.

Nachdem das Projekt in der Produktionsumgebung online gegangen ist und mit der Bereitstellung externer Dienste begonnen hat, benötigt es weiterhin Abhängigkeitsunterstützung, wie z. B. die jQuery-Bibliothek, Routing usw., die mit dem Befehl --save oder -S installiert werden kann.
Erstellen Sie eine Konfigurationsdatei webpack.config.js im Stammverzeichnis des Projekts und führen Sie die folgenden Konfigurationen nacheinander durch:

(1) Konfigurationseintrag

module.exports = { Eintrag:'./src/index.js' }

(2) Ausgabe konfigurieren

const path = require('Pfad');
      modul.exporte = {
          // ...
          Ausgabe: {
              Pfad: Pfad.auflösen(__dirname, 'dist'),
              Dateiname: „main.js“
          }
      }

(3) Konfigurationslader

modul.exporte = {
    // ...
    Modul:{
        Regeln:[
            {
                Test: /\.css$/,
                verwenden: ['Style-Loader', 'CSS-Loader']
            },
            {
                test: /\.js?$/, // Regulärer Ausdruck für jsx/js-Dateien exclude: /node_modules/, // Ordner node_modules ausschließen use:{
                    // Loader ist Babel
                    Lader: 'babel-loader',
                    Optionen:
                        // Babel-Escape-Konfigurationsoptionen babelrc: false,
                        Voreinstellungen: [
                            [erfordern.resolve('@babel/preset-env'), {Module: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
}

(4) Konfigurieren von Plugins

const HtmlWebPackPlugin = erfordern('html-webpack-plugin');
modul.exporte = {
	// ...
	Plugins:[
		neues HtmlWebPackPlugin({
			Vorlage: „public/index.html“,
			Dateiname: 'index.html',
			injizieren: wahr
		})
	]
}

Ausführen des Paketierungsbefehls

npx webpack --Modus-Entwicklung

Konfigurieren Sie den Befehl „npm run build“, um Verpackungsvorgänge durchzuführen:

//Build-Element in der Datei package.json hinzufügen {
    "Skripte": {
        „Build“: „webpack --mode Produktion“
    }
}

Führen Sie den Verpackungsbefehl aus:

npm-Ausführung erstellen

Erstellen Sie einen lokalen Server

Abhängigkeiten installieren

cnpm ich webpack-dev-server -D

Konfigurieren Sie lokale dienstbezogene Informationen in der Datei webpack.config.js

modul.exporte = {
          // ...
          devServer: {
              Inhaltsbasis: "./dist",
              Host: "localhost",
              Hafen: 3000
          }
      }

Konfigurieren Sie den Startbefehl in der Datei package.json

{
    "Skripte": {
        „Start“: „webpack-dev-server – Entwicklungsmodus – Öffnen“
    }
}

Führen Sie den Befehl „Start Service“ aus.

npm starten

Dann einige Integration

Integration mit Vue

vue-loader: Vue-Dateien analysieren vue-template-compiler

      Installation: npm install vue-loader vue-template-compiler -D
      Webpack-Datei konfigurieren: {test:/\.vue$/,use:['vue-loader']},

      Instanziieren Sie das Plugin vueLoaderPlugin const { VueLoaderPlugin } = require('vue-loader')
      Plugin-Instanziierung hinzufügen:
       },
          Plugins: [
              neues VueLoaderPlugin()
          ]

Integration mit weniger

Installation: npm install less-loader less -D
Konfiguration:
 Modul: {
        Regeln:
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        ]
    },

Integration mit Sass

Installation: npm install sass-loader node-sass -D
Konfiguration:
 Modul: {
        Regeln:
            {test:/\.(scss|sass)$/,Verwenden:['style-loader','css-loader','sass-loader']},
        ]
    },

Allgemeine Sass-Syntax: https://www.jb51.net/article/222337.htm

Mit Vue-Router

Installation: npm install vue-router -D

Integration mit vuex

Installation: npm install vuex -D

Dies ist das Ende dieses Artikels zum Beheben des Ausnahmefehlers beim Erstellen einer Vue-Umgebung mit Webpack. Weitere relevante Inhalte zu Fehlern beim Erstellen einer Vue-Umgebung mit Webpack finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!