webpack実行時にInvalid

webpack 実行時に下記のエラー。

$ ./node_modules/.bin/webpack-dev-server
✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

loaders プロパティが不正？

configuration.module has an unknown property 'loaders'　でググる。

webpack.config.js　の loaders を rules に変更。

webpack.confi.js

module.exports = {
  //...
  module: {
    rules: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015']
      }
    }]
  },

上手くいった。

webpack のバージョン。

package.json

{
  "dependencies": {
    "webpack": "^4.5.0",
    "webpack-dev-server": "^3.1.1"
  }
}

参考

• webpack 4.1.1 -> configuration.module has an unknown property 'loaders'. - Stack Overflow
• Concepts
• 最短で学ぶReactとReduxの基礎から実践まで | Udemy
  このレクチャーの webpack.config.js のままだとエラー出たので上記対処。