时间戳

首页 > 解决方案 > Webpack 问题（通过 O'Reilly React 书）

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

问题描述

我目前正在阅读 O'Reilly 的书“[Learning React][1]”，但我根本无法让 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

完整的错误信息：

-----------------------------------------
Error: options/query cannot be used with loaders (use options for each array item) in {
  "test": {},
  "exclude": {},
  "loader": [
    "babel-loader"
  ],
  "query": {
    "presets": [
      "env",
      "stage-0",
      "react"
    ]
  }
}
    at Function.normalizeRule (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\RuleSet.js:264:10)
    at rules.map (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\RuleSet.js:110:20)
    at Array.map (<anonymous>)
    at Function.normalizeRules (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\RuleSet.js:109:17)
    at new RuleSet (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\RuleSet.js:104:24)
    at new NormalModuleFactory (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
    at Compiler.createNormalModuleFactory (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:586:31)
    at Compiler.newCompilationParams (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:603:30)
    at Compiler.compile (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:611:23)
    at readRecords.err (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:284:11)
    at Compiler.readRecords (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:479:11)
    at hooks.run.callAsync.err (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:281:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.beforeRun.callAsync.err (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:278:19)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.run (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:275:24)
    at processOptions (C:\Users\User\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:493:14)
    at yargs.parse (C:\Users\User\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:498:3)
    at Object.parse (C:\Users\User\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\Users\User\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:206:8
    at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:500:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)

-----------------------------------------

  [1]: https://www.amazon.co.uk/gp/product/1491954620/ref=ppx_yo_dt_b_asin_title_o03__o00_s00?ie=UTF8&psc=1

标签： webpack

解决方案

您不能将属性query与loader. 请注意，该属性query已弃用。options您可以使用以下语法use：

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // options
            },
          },
        ],
      },
    ],
  },
}

推荐阅读