Webpack 2配置錯誤

Question

我不確定我做錯了什麼，希望對此配置有所瞭解。我收到以下錯誤：

錯誤：拋出新WebpackOptionsValidationError（webpackOptionsValidationErrors）

/var/www/homelyfe/hl-app/node_modules/webpack/lib/webpack.js:16 
     throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); 
     ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 
- configuration.module.rules[1].use[0] should be one of these: 
    string | object { loader?, options?, query? } 
- configuration.module.rules[1].use should be one of these: 
    string | object { loader?, options?, query? } | [string | object { loader?, options?, query? }] 
    at webpack (/var/www/homelyfe/hl-app/node_modules/webpack/lib/webpack.js:16:9) 
    at processOptions (/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:310:17) 
    at Object.<anonymous> (/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:374:1) 
    at Module._compile (module.js:413:34) 
    at Object.Module._extensions..js (module.js:422:10) 
    at Module.load (module.js:357:32) 
    at Function.Module._load (module.js:314:12) 
    at Function.Module.runMain (module.js:447:10) 
    at startup (node.js:141:18) 
    at node.js:933:3 
error Command failed with exit code 1. 

我的WebPack配置文件：

const path = require("path"); 
const merge = require("webpack-merge"); 
const htmlWebpackPlugin = require("html-webpack-plugin"); 
const parts = require("./webpack.config.parts"); 
const PATHS = { 
    app : path.join(__dirname, "app"), 
    build : path.join(__dirname, "build") 
}; 
const TARGET = process.env.BUILD_DEV || process.env.BUILD_PROD; 

const common = { 
    entry : { 
     app : PATHS.app + "/index.js" 
    }, 
    output : { 
     filename : "run.build.js", 
     path : PATHS.build, 
     publicPath : "/assets/" 
    }, 
    resolve : { 
     extensions : [ "js", "jsx" ] 
    }, 
    module : { 
     rules : [ 
      { 
       test : /\.jsx?$/, 
       use : [ 
        { 
         loader : "babel-loader", 
         options : { 
          presets : [ 
           "react", 
           "es2015" 
          ] 
         } 
        } 
       ], 
       include : PATHS.app 
      } 
     ] 
    } 
}; 

var config; 

switch(process.env.npm_lifecycle_event){ 
    case("buildProd"): 
     config = merge(common, 
          parts.defineENV(), 
          parts.sourceMaps("__PROD__"), 
          {}); 
    case("startDev"): 
    default: 
     config = merge(common, 
          parts.defineENV(), 
          parts.sourceMaps("__DEV__"), 
          parts.devServer(PATHS.app), 
          parts.eslint(PATHS.app, path.join(__dirname, ".eslintrc")), 
          parts.devtool(), 
          parts.htmlWebpackPlugin("---TESTING---")); 
}; 

module.exports = config; 

顯然，林做錯事與合併函數，如錯誤通知，但是，返回的對象似乎很好。下面是配置obj的輸出（主webpack.config OBJ）：

配置輸出對象：

{ 
    entry:{ 
    app: '/var/www/homelyfe/hl-app/app/index.js' 
    }, 
    output:{ 
    filename: 'run.build.js', 
    path: '/var/www/homelyfe/hl-app/build', 
    publicPath: '/assets/' 
    }, 
    resolve:{ 
    alias:{ 
     assets: '/var/www/homelyfe/hl-app/app/assets', 
     components: '/var/www/homelyfe/hl-app/app/components' 
    }, 
    extensions: [ 'js', 'jsx' ] 
    }, 
    module:{ 
    rules:[ 
     { test: /\.jsx?$/, 
     use:[ 
      { loader: 'babel-loader', 
      options : { 
       presets : [ 
       "react", 
       "es2015" 
       ] 
      } 
      }, 
     ], 
     include: '/var/www/homelyfe/hl-app/app' 
     }, 
     { test: /\.jsx?$/, 
     use: [ 
      { enforce: 'pre', 
      loader: 'eslint-loader', 
      query: [Object] } 
     ], 
     include: '/var/www/homelyfe/hl-app/app' 
     } 
    ] 
    }, 
    plugins: 
    [ DefinePlugin { definitions: [Object] }, 
    HotModuleReplacementPlugin { multiStep: true, fullBuildTimeout: 200 }, 
    HtmlWebpackPlugin { options: [Object] } ], 
    devtool: 'eval-source-map', 
    devServer: 
    { historyApiFallback: true, 
    hot: true, 
    inline: true, 
    stats: 'errors-only' } } 

Answer 1

如果你看看這個驗證在webpack github repo

的配置模式

"ruleSet-use-item": { 
    "anyOf": [ 
    { 
     "$ref": "#/definitions/ruleSet-loader" 
    }, 
    { 
     "additionalProperties": false, 
     "properties": { 
     "loader": { 
      "$ref": "#/definitions/ruleSet-loader" 
     }, 
     "options": { 
      "$ref": "#/definitions/ruleSet-query" 
     }, 
     "query": { 
      "$ref": "#/definitions/ruleSet-query" 
     } 
     }, 
     "type": "object" 
    } 
    ] 
} 

再看看你的第二個規則

{ test: /\.jsx?$/, 
    use: [ 
     { enforce: 'pre', 
     loader: 'eslint-loader', 
     query: [Object] } 
    ], 
    include: '/var/www/homelyfe/hl-app/app' 
} 

你會發現enforce不是ruleSet-use-item的一部分。您只能指定loader,options和query那裏

Answer 2

如您所懷疑的，罪魁禍首是merge功能。 enforce屬性是rule對象的一部分。它不應該是UseEntry的財產。

{ test: /\.jsx?$/, 
    enforce: 'pre', 
    use: [ 
     { 
      loader: 'eslint-loader', 
      query: [Object] } 
     ], 
    include: '/var/www/homelyfe/hl-app/app' 
}