Javascript 如何在react js中使用webpack自定义配置？

我使用的自定义网页包配置文件是：

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'dist/bundle.js',
        sourceMapFilename: 'dist/bundle.map'
    },
    devtool: '#source-map',
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: [ 'react', 'es2015' ]
                }
            }
        ]
    }
};

当我在终端中运行

wepback

时，它抛出一个错误：

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 { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

---

如何正确使用webpack的自定义配置文件并修复此错误？

对于使用

webpack

的加载程序，您应该添加

规则

属性，并使用test regex指示要转换的文件

 module: {
    rules: [
        {
            test: /\.(jsx|js)$/
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                   presets: [ 'react', 'es2015' ]
                 } 
            }
        }
    ]
}

---

有关更多和准确的信息，请查看与您使用的版本相关的信息。

您可以查看正在运行的网页包配置。谢谢，我使用了最新的网页包文档来解决此问题