如何将 webpack 自定义配置与 react js 一起使用？

Question

我正在使用一个自定义的 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 的自定义配置文件并修复此错误？

Answer 1

要使用 webpack 的加载器，您应该添加带有测试正则表达式的 rules 属性，指示要转换哪些文件。

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

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