configuration.module has an unknown property 'loaders' : <p>my output of error:</p>

<blockquote>
  <p>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 (<code>NormalModuleFactory</code>).</p>
</blockquote>

<p>my webpack.config.js:</p>

<pre><code>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;
</code></pre>

<p>my webpack version:</p>

<pre><code>webpack@4.1.1
</code></pre>
