configuration.module hat eine unbekannte Eigenschaft 'loader'

136

meine Fehlerausgabe:

Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt. - configuration.module hat eine unbekannte Eigenschaft 'loader'. Diese Eigenschaften sind gültig: Objekt {exprContextCritical?, ExprContextRecursive?, ExprContextRegExp?, ExprContextRequest?, NoParse?, Regeln?, DefaultRules?, UnknownContextCritical?, UnknownContextRecursive? ?, strictExportPresence?, strictThisContextOnImports? } -> Optionen, die die normalen Module betreffen ( NormalModuleFactory).

meine webpack.config.js:

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

meine Webpack-Version:

webpack@4.1.1

reactjs webpack

— S.M_Emamian
quelle

317

Sie sollten in Webpack 4 wechseln loaderszu rules:

Veränderung:

loaders

zu:

rules

Quelle: Lader

Beispiel:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

— S.M_Emamian
quelle

1

Ist es ein Tippfehler? Es sollte rulesin Webpack 4 sein.

— Sin

Sie sollten Regeln in Webpack 4 verwenden.

— S.M_Emamian

2

Ändern Sie die Lader in Webpack 4 in Regeln ... für den Fall, dass es noch einmal gesagt werden muss: /

— Helmut Granda

1

Sie sollten in Ihrer Antwort erklären, dass der Grund für die Änderung Webpack 4 ist.

— kojow7

13

Verwenden Sie rulesin Webpack 4 anstelle von loaders.

https://webpack.js.org/concepts/loaders/

— Shawn Stephens
quelle

2

Die oben angegebenen Antworten funktionieren, aber wir können dieses Problem beheben, indem wir die Version von Webpack und Webpack-Dev-Server in ändern

"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

Es kann auch das Problem lösen. Hoffe es wird helfen.

— Anshul
quelle

Ich habe dir einen Aufwärtstrend gegeben. Das einzige Problem ist, dass Benutzer Versionen von Frameworks und Tools aktualisieren möchten, um neue Funktionen zu erhalten, und nicht zu älteren Versionen zurückkehren möchten, um sicherzustellen, dass sie ihre Konfigurationsdateien nicht ändern müssen. Vielleicht ist es nicht schlecht, sich die Mühe zu machen, die Konfigurationsdatei so zu ändern, dass sie mit der neuen Funktionsweise des Tools übereinstimmt. Es sei denn, das ist unmöglich.

— Eniola

Danke @Eniola, ja du hast recht. Wie ich bereits erwähnt habe, ist die Antwort von S.M_Emamian korrekt, aber meine Antwort funktioniert, wenn jemand der Arbeit zustimmt, wird die ältere Version von Webpack verwendet.

— Anshul

2

Sie sollten das Migrationsdienstprogramm verwenden , um Ihre Webpack-Konfigurationsdateien zu migrieren. Es hat bei mir funktioniert.

Die Migrationsdokumentation ist ebenfalls nützlich.

— MattG
quelle

0

Ich arbeite für mich unter webpack.config.js

module.exports = {
    entry: [
        '.src/index.js'
    ],
    output:{
        path: __dirname,
        filename: 'app/js/main.js'
    },
    module:{
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
}

— Pankaj Upadhyay
quelle