configuration.module a une propriété inconnue 'loaders'

136

ma sortie d'erreur:

Objet de configuration non valide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma d'API. - configuration.module a une propriété inconnue 'loaders'. Ces propriétés sont valides: object {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, unknownContextRegRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, unknownContextRegRegExp ?, exprContextRequest ?? ?, strictExportPresence ?, strictThisContextOnImports? } -> Options affectant les modules normaux ( NormalModuleFactory).

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

ma version webpack:

webpack@4.1.1
reactjs webpack S.M_Emamian
la source

Réponses:

317

Vous devriez changer loaderspour rulesdans le webpack 4:

changement:

loaders

à:

rules

source: chargeurs

Exemple:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};
S.M_Emamian
la source
1
Est-ce une faute de frappe? Il devrait être rulesdans le webpack 4.
Sin
vous devriez utiliser les règles du webpack 4.
S.M_Emamian
2
changer les chargeurs en règles dans le webpack 4 ... au cas où cela aurait besoin d'être répété: /
Helmut Granda
1
Vous devez expliquer dans votre réponse que la raison du changement est le webpack 4.
kojow7
2

Les réponses ci-dessus fonctionnent mais nous pouvons résoudre ce problème en changeant la version de webpack et webpack-dev-server en 

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

Cela peut également résoudre le problème. J'espère que cela aidera.

Anshul
la source
Je vous ai donné une hausse. Le seul problème est que les gens veulent mettre à niveau les versions des frameworks et des outils pour obtenir de nouvelles fonctionnalités et ne pas revenir aux anciennes versions juste pour s'assurer qu'ils n'ont pas à changer leurs fichiers de configuration. Peut-être que prendre la peine de changer le fichier de configuration pour s'aligner sur la nouvelle façon dont l'outil fonctionne n'est pas mal. A moins que ce ne soit impossible.
Eniola
Merci @Eniola, ouais tu as raison. Comme je l'ai mentionné, la réponse S.M_Emamian est correcte mais ma réponse fonctionnera si quelqu'un accepte de travailler avec l'ancienne version de webpack.
Anshul
2

Vous devriez utiliser l' utilitaire de migration pour migrer vos fichiers de configuration Webpack, cela a fonctionné pour moi.

La documentation de migration est également utile.

MattG
la source
0

Travailler pour moi ci-dessous 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
la source