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

使用兩個不同的對象這是一個有點多餘，但它應該工作