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

Antworten:

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
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
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