webpack2：配置模块规则

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显示完全相同的用法示例时，甚至有可能？

请解释我在这里做错了什么。您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", 
    }  
    ] 
} 

内

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

使用两个不同的对象这是一个有点多余，但它应该工作