configuration.module ma nieznaną właściwość „loaders”

mój wynik błędu:

Nieprawidłowy obiekt konfiguracyjny. Pakiet Webpack został zainicjowany przy użyciu obiektu konfiguracyjnego, który nie pasuje do schematu interfejsu API. - configuration.module ma nieznaną właściwość „loaders”. Te właściwości są ważne: object {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?, rules ?, defaultRules ?, unknownContextCritical ?, unknown ?, strictExportPresence ?, strictThisContextOnImports? } -> Opcje dotyczące zwykłych modułów ( NormalModuleFactory).

mój 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;

moja wersja webpacka:

webpack@4.1.1

W pakiecie internetowym 4 należy zmienić loadersna rules:

zmiana:

loaders 

do:

rules

źródło: Loaders

Przykład:

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

Użyj rulesw pakiecie webpack 4 zamiast loaders.

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

Powyższe odpowiedzi działają, ale możemy rozwiązać ten problem, zmieniając wersję pakietu webpack i webpack-dev-server na

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

Może również rozwiązać problem. Mam nadzieję, że to pomoże.

Powinieneś użyć narzędzia migracji do migracji plików konfiguracyjnych pakietu webpack, zadziałało dla mnie.

Dokumentacja migracji jest również przydatna.

Pracuję dla mnie poniżej 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' }
        ]
    }
}