webentwicklung-frage-antwort-db.com.de

Ungültiges Konfigurationsobjekt im Webpack

Ich folge Lynda.com - React.js Essential Training von Eve Porcello. In dem Video "Building with Webpack" folgte ich genau den beschriebenen Schritten des Autors, aber der Befehl "webpack" schlug fehl und gab folgenden Fehler

Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt . - configuration.output.path: Der angegebene Wert "dist/assets" ist kein absoluter Pfad!

Nachfolgend finden Sie meine Dateien webpack.config.js und package.json.

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "dist/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./dist",
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}

package.json

{
  "name": "react-essential",
  "version": "1.0.0",
  "description": "A project focusing on React and related tools",
  "main": "index.js",
  "scripts": {
    "start": "httpster -d ./dist -p 3000"
  },
  "author": "Indu Pillai",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.4.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

Ich wiederholte die Schritte immer wieder, aber es funktioniert nicht. Ich bin ziemlich neu in dieser Webpacksache, daher kann ich nicht herausfinden, was das Problem wirklich ist und welchen absoluten Pfad es erfordert. Ich habe auch einen absoluten Weg aus einer Antwort auf eine andere (ähnliche) Frage ausprobiert, aber das hat nicht funktioniert.

Vielen Dank!

13
Indu Pillai

Dieses wird mit dem neuesten Webpack kompiliert - ab dem 10. April 2017: 

var webpack = require("webpack");

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: ["babel-loader"],
        }]
    }
}
18

Ich mache denselben Kurs wie Sie und ich musste Folgendes tun, damit Webpack die Datei bundle.js korrekt ausgibt:

  1. Deinstalliere das neueste Webpack (2, wenn du gerade npm install webpack benutzt hast)
  2. Dann im Terminallauf npm install -g [email protected] (sie empfiehlt die Verwendung von Sudo npm install -g, es liegt also an Ihnen, Sudo zu verwenden oder nicht)
  3. Die nächste Ausgabe, die einige wenige Probleme mit dem Webpack auslösten, könnte nur für mich zutreffen, aber ich musste require('path'), weil ich nicht auflösende Pfadfehler bekam, und npm install babel-loader musste, weil es aus irgendeinem Grund nicht durch die package.json-Datei geladen wurde ein path.resolve-Zusatz für den node_modules-Ordner 
  4. Meine webpack.config-Datei sieht jetzt wie folgt aus:

    const webpack = require('webpack');
    const path = require('path');
    
    module.exports = {
        entry: path.resolve(__dirname, './src/index'),
        output: {
            path: path.resolve(__dirname, './dist/assets'),
            filename: 'bundle.js',
            publicPath: 'assets'
        },
        devServer: {
            inline: true,
            contentBase: path.resolve(__dirname, './dist'),
            port: 3000
        },
        module: {
            loaders: [{
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: path.resolve(__dirname, './node_modules/babel-loader'),
                query: {
                    presets: ['latest', 'stage-0', 'react']
                }
            }]
        }
    }
    
  5. Schließlich zeigte mir webpack --display-error-details, was die Fehler waren, aber die hier eingefügte Konfigurationsdatei funktionierte am Ende für mich.

Es sollte beachtet werden, dass dies (hoffentlich) Ihnen ermöglicht, den Kurs selbst zu beenden, aber es hilft Ihnen nicht, zu erfahren, was aktualisiert wurde oder migriert werden muss, um auf dem neuesten Stand zu bleiben und Webpack 2 zu verwenden. Hier gibt es andere Antworten beschäftigen sich mit der Migration, die auch untersucht werden sollte.

Hoffe das hilft dir!

6
rgjr

Dieses Tutorial wurde mit der Version 1 von Webpack erstellt, Sie verwenden jedoch die neueste Version 2.

Sie können diesem Migrationshandbuch folgen, um den Code auszuführen: https://webpack.js.org/migrate/3/

Hier ist Ihre aktualisierte Konfiguration

var webpack = require("webpack");
var folder = __dirname;

module.exports = {
  entry: "./src/index.js",
  output: {
    path: folder + "dist/assets",
    filename: "bundle.js",
    publicPath: "/assets"
  },
  devServer: {
    inline: true,
    contentBase: folder + "dist",
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}
3
Kmaschta

~ Lader ~ durch ~ Regeln ~ ersetzen

module: {
    loaders: [
        {

Anscheinend wurden die Word-Loader hier durch Regeln ersetzt, daher sollte das richtige sein:

module: {
    rules: [
        {
1
Leo Leao

Als Randbemerkung verwendet der Ausbilder in den Übungsdateien diese Syntax für den Babel Loader:

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: ["babel-loader"],
        query: {
            presets: ["latest", "stage-0", "react"]
        }
    },
]

was auf webpack 2.5.0 mit einem Fehler fehlschlägt:

Error: options/query cannot be used with loaders (use options for each array item)

Dies wird gelöst, indem die Klammern um "babel-loader" entfernt werden:

loader: "babel-loader", //no brackets - not an array

oder indem Sie den Loader und die entsprechenden Optionen über die Syntax "use" angeben:

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['latest', 'stage-0', 'react']
            }
        }
    }
]

Hoffentlich bekommen sie das in Lynda repariert! Diese neuen Technologien entwickeln sich so schnell! Weitere Informationen zum Babel-Loader: https://github.com/babel/babel-loader

1
paulular

Webpack ist etwas schwieriger als Create-React-App. Die einfachste und einfachste Methode zum Erstellen von Reaktionsprojekten mithilfe der folgenden Befehle von https://facebook.github.io/react/docs/installation.html

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Sie können den gesamten Reaktionscode aus dem Kurs verfolgen, erwarten Sie jedoch ein Webpack, da JSX-Code von create -react-app kompiliert wird und alles, was mit Webpack usw. zu tun hat.

1
Naveed Aheer

bei der Migration in eine neue Version von Webpack tritt dieser Fehler auf. Um dies zu lösen, müssen Sie den absoluten Pfad zu Ihrem Verzeichnis so angeben

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
};
0
iamsangeeth

Damit dies mit der neuesten Version von webpack v3 funktioniert, müssen Sie einige Änderungen an der Datei webpack.config.js vornehmen. Ihr Code sollte nach dem Update so aussehen

            var webpack = require("webpack");
            var path = require('path')

            module.exports = {
                entry: path.resolve(__dirname + "/src/index.js"),
                output: {
                    path: path.resolve(__dirname + "/dist/assets"),
                    filename: "bundle.js",
                    publicPath: "assets"
                },
                devServer: {
                    inline: true,
                    contentBase: __dirname + '/dist',
                    port: 3000
                },
                module: {
                    loaders: [
                        {
                            test: /\.js$/,
                            exclude: /(node_modules)/,
                    use: {
                    loader: "babel-loader",
                            options: {
                                presets: ["latest", "stage-0", "react"]
                            }
                        }
                }
                    ]
                }
            }

und Ihre package.json-Datei sollte so aussehen

    {
      "name": "activity-counter-application",
      "version": "1.0.0",
      "description": "A project focusing on building Activity Counter using React and related tools",
      "main": "./index.js",
      "scripts": {
        "start": "./node_modules/.bin/webpack-dev-server"
      },
      "author": "RJ",
      "license": "MIT",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "webpack": "^3.5.1",
        "webpack-dev-server": "^2.7.0"
      },
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      }
    }
0
Rakesh Jain

Sie müssen den output.path als absoluten Pfad definieren

Sie können die folgende Zeile vor der Datei webpack.config.js hinzufügen 

 var path = require('path')

und ändern Sie die Ausgabe wie folgt

 output: {
   path: path.resolve(__dirname, "dist/assets"),
   filename: "bundle.js",
   publicPath: "assets"
 }
0
Yu Huang

Ich hatte das gleiche Problem und ein bisschen mehr. Also habe ich ein Shell-Skript erstellt, um den Installationsprozess einfacher und schneller zu gestalten.


für Linux-Benutzer

probiere diese bash script auto_conf_wb und so weiter

  • downloads
  • installiert
  • webpack konfigurieren
  • babel konfigurieren
  • sever konfigurieren

für dich.

Beachten Sie, dass dies nur für die gemeinsame Verwendung von ES6+, webpack, babel gilt.

0
Shakiba Moshiri

Stellen Sie sicher, dass Sie const path = require('path'); oben in Ihre webpack.config.js -Datei eingefügt haben und der Pfad wie path: path.resolve(__dirname, 'dist/assets'),

0
Dushan