Question

我正在使用webpack@2.6.1

我的配置非常简单：

{
  resolve: {
    modules: [
      SRC_ROOT,
      "node_modules",
    ],
  },

  entry: "index.js",

  output: {
    path: sysPath.join(APP_ROOT, "dist"),
    filename: "index.js",
  },

  module: {
    rules: [
      {
        test: /\.js$/i,
        include: SRC_ROOT,
        use: [
          {
            loader: "eslint-loader",
            enforce: "pre",
            options: {
              failOnError: true,
              failOnWarning: true,
            },
          },

          {
            loader: "babel-loader",
          }
        ],
      }
    ]
  },
}

当我运行它时，我得到了以下内容：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[0].use should be a string.
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use should be an object.
    * configuration.module.rules[0].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use[0] should be a string.
    * configuration.module.rules[0].use[0] should be an instance of function.
    * configuration.module.rules[0].use[0] has an unknown property 'enforce'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[0].use[0] should be one of these:
      non-empty string | function | object { loader?, options?, query? }

我很困惑，因为这些错误与我在文档中看到的完全相反：https://webpack.js.org/configuration/#options。

不支持“使用”中的数组？ “未知财产'强制执行'”？当doc显示完全相同的用法示例时，它怎么可能呢？

请解释我在这里做错了什么。

Answer 1

问题是enforce不是加载器上的有效属性。它必须用在规则上，因此它在文档中Rule.enforce。错误消息的以下行告诉您它不是有效的属性：

* configuration.module.rules[0].use[0] has an unknown property 'enforce'. These properties are valid:
  object { loader?, options?, query? }

它不会将use显示为有效的属性，因为内部use，loaders和loader被视为别名。

您必须将enforce放在整个规则上。

{
  test: /\.js$/i,
  enforce: "pre",
  include: SRC_ROOT,
  use: [
    {
      loader: "eslint-loader",
      options: {
        failOnError: true,
        failOnWarning: true,
      },
    },
    {
      loader: "babel-loader",
    }
  ],
}

但您并不希望babel-loader成为预加载器，这意味着您需要创建两个单独的规则。

rules: [
  {
    test: /\.js$/i,
    enforce: "pre",
    include: SRC_ROOT,
    use: [
      {
        loader: "eslint-loader",
        options: {
          failOnError: true,
          failOnWarning: true,
        },
      },
    ]
  },
  {
    test: /\.js$/i,
    include: SRC_ROOT,
    use: [
      {
        loader: "babel-loader"
      }
    ],
  }
]

我故意保留了规则的明确版本。您确实可以使用一些快捷方式，其中之一是如果您只使用单个加载器，则可以直接在规则上指定options。选项将被转发到加载程序，这可能是您认为enforce在加载程序上有效的原因。

Answer 2

在rules

中使用两个不同的对象

module: {
  rules: [
    {
      test: /\.js$/i,
      include: SRC_ROOT,
      loader: "eslint-loader",
      enforce: "pre",
      options: {
        failOnError: true,
        failOnWarning: true,
      }
    },
    {
      test: /\.js$/i,
      include: SRC_ROOT,
      loader: "babel-loader",
    }    
  ]
}

它有点多余，但应该有效

webpack2：配置模块规则

2 个答案: