设置环境Webpack已初始化时的React js问题答案

【问题标题】：React js Issue while setting environment Webpack has been initialised设置环境Webpack已初始化时的React js问题
【发布时间】：2018-11-02 21:36:34
【问题描述】：

我正在为 react js 设置环境，我面临以下错误。

我正在关注链接——https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.html

如果我需要进行更改，请让我更正

配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.module 有一个未知的属性 'loaders'。这些属性是有效的： object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> 影响正常模块的选项 (NormalModuleFactory)。

【问题讨论】：

链接 -- tutorialspoint.com/reactjs/reactjs_environment_setup.htm
当我使用 npm start 命令时出现上述错误..
下面是 webpack-config.js 的代码 ---var config = { entry: './main.js', output: { path:'/', filename: 'index.js ', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: {预设：['es2015', 'react'] } } ] } } module.exports = config;

标签： reactjs webpack

【解决方案1】：

没想到“加载器”会在模块下。根据文档，配置看起来不同。 https://webpack.js.org/concepts/loaders/

试试：

var config = {
    entry: './main.js',
    output: {
        path:'/',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            }
        }]
    },
};

module.exports = config;

【讨论】：