Question

我目前正在阅读O'Reilly的书“ Learning React”，而我根本无法使Webpack正常工作。这本书以零解释很快就越过了这一点……

这是我的webpack.config.js：

module.exports = {
entry: "./src/index.js",
output: {
    path: "/dist/assets",
    filename: "bundle.js"
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: ['babel-loader'],
            query: {
                presets: ['env', 'stage-0', 'react'],
            }
        }
    ]
}
}

返回的错误（运行“ webpack”后）如下：

错误：{
中的options / query不能与加载程序一起使用（每个数组项都使用选项）

有什么想法我要去哪里吗？

npm -v：6.5.0 webpack -v：4.29.3

完整错误消息：

错误：{中的选项/查询不能与加载程序一起使用（每个数组项都使用选项） “测试”：{}， “排除”：{}， “加载程序”：[ “小型装载机” ]， “查询”：{ “预设”：[ “ env”， “ stage-0”， “反应” ] } } 在Function.normalizeRule（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ RuleSet.js：264：10）在rules.map（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ RuleSet.js：110：20）在Array.map（）在Function.normalizeRules（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ RuleSet.js：109：17）在新的RuleSet中（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ RuleSet.js：104：24）在新的NormalModuleFactory（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ NormalModuleFactory.js：115：18）在Compiler.createNormalModuleFactory（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：586：31）在Compiler.newCompilationParams（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：603：30）在Compiler.compile（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：611：23）在readRecords.err（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：284：11）在Compiler.readRecords（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：479：11）在hooks.run.callAsync.err（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：281：10）在AsyncSeriesHook.eval [作为callAsync]（在创建时（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ tapable \ lib \ HookCodeFactory.js：32：10），：6：1）在AsyncSeriesHook.lazyCompileHook（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ tapable \ lib \ Hook.js：154：20）在hooks.beforeRun.callAsync.err（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：278：19）在AsyncSeriesHook.eval [作为callAsync]（在创建时（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ tapable \ lib \ HookCodeFactory.js：32：10），：15：1）在AsyncSeriesHook.lazyCompileHook（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ node_modules \ tapable \ lib \ Hook.js：154：20）在Compiler.run（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js：275：24）在processOptions（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack-cli \ bin \ cli.js：493：14）在yargs.parse（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack-cli \ bin \ cli.js：498：3）在Object.parse（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack-cli \ node_modules \ yargs \ yargs.js：567：18）在C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack-cli \ bin \ cli.js：206：8 在对象。（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack-cli \ bin \ cli.js：500：3）在Module._compile（内部/模块/cjs/loader.js:734:30）在Object.Module._extensions..js（内部/模块/cjs/loader.js:745:10）在Module.load（internal / modules / cjs / loader.js：626：32）在tryModuleLoad（内部/模块/cjs/loader.js:566:12）在Function.Module._load（内部/模块/cjs/loader.js:558:3）在Module.require（internal / modules / cjs / loader.js：663：17）在要求时（内部/模块/cjs/helpers.js:20:18）在对象。（C：\ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ bin \ webpack.js：156：2）在Module._compile（内部/模块/cjs/loader.js:734:30）在Object.Module._extensions..js（内部/模块/cjs/loader.js:745:10）在Module.load（internal / modules / cjs / loader.js：626：32）在tryModuleLoad（内部/模块/cjs/loader.js:566:12）在Function.Module._load（internal / modules / cjs / loader.js：558：3）

Answer 1

不能将属性query与loader数组一起使用。请注意，query的{{1}}属性is deprecated。您可以改为使用语法use：

options

Answer 2

module.exports = {
entry: "./src/index.js",
output: {
    path: "/dist/assets",
    filename: "bundle.js"
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['env', 'stage-0', 'react'],
            }
        }
    ]
}

尝试从阵列中取出babel-loader。

Webpack问题（通过O'Reilly React书）

2 个答案: