Проблемы с Webpack (через книгу O'Reilly React)

Question

Я в настоящее время перебираю книгу О'Рейли ' 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') выглядит следующим образом:

Ошибка: параметры / запрос нельзя использовать с загрузчиками (используйте параметры для каждого элемента массива) в {

Есть идеи, где я ошибаюсь?

npm -v: 6.5.0 webpack -v: 4.29.3

Полное сообщение об ошибке:

---

Ошибка: параметры / запрос нельзя использовать с загрузчиками (используйте параметры для каждогоэлемент массива) в {"test": {}, "exclude": {}, "loader": ["babel-loader"], "query": {"presets": ["env", "stage-0", "реагировать»]}} в Function.normalizeRule (C: \ Users \ Пользователь \ 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 \ Пользователь \ 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 \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ NormalModuleFactory.js: 115: 18) вCompiler.createNormalModuleFactory (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js: 586: 31) в Compiler.newCompilationParams (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules\ webpack \ lib \ Compiler.js: 603: 30) в файле Compiler.compile (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js: 611: 23) в файле readRecords.err (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js: 284: 11) в Compiler.readRecords (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib\ Compiler.js: 479: 11) по адресу hooks.run.callAsync.err (C: \ Users \ Пользователь \ AppData \ Roaming \ npm \ node_modules \ webpack \ lib \ Compiler.js: 281: 10) по адресу AsyncSeriesHook.eval [как callAsync] (eval при создании (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] (eval при создании (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 \ Пользователь \ 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\ НПМ \ 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 (внутренний / modules / cjs / loader.js: 734: 30) вObject.Module._extensions..js (внутренний / modules / cjs / loader.js: 745: 10) в Module.load (внутренний / modules / cjs / loader.js: 626: 32) в tryModuleLoad (внутренний / modules / cjs)/loader.js:566:12) в Function.Module._load (внутренний / modules / cjs / loader.js: 558: 3) в Module.require (внутренний / modules / cjs / loader.js: 663: 17) вrequire (internal / modules / cjs / helpers.js: 20: 18) в объекте.(C: \ Users \ User \ AppData \ Roaming \ npm \ node_modules \ webpack \ bin \ webpack.js: 156: 2) в модуле Module._compile (внутренний / modules / cjs / loader.js: 734: 30)в Object.Module._extensions..js (внутренний / modules / cjs / loader.js: 745: 10) в Module.load (внутренний / modules / cjs / loader.js: 626: 32) в tryModuleLoad (внутренний / modules /cjs / loader.js: 566: 12) в Function.Module._load (внутренний / modules / cjs / loader.js: 558: 3)

---

Answer 1

Вы не можете использовать атрибут query с массивом loader.Обратите внимание, что атрибут query устарел для options.Вы можете использовать синтаксис use вместо:

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // 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 из массива.