Webpack 2設定エラー

Question

私は間違って何をしているのかわからないが、この設定についてのいくつかの洞察に感謝します。私は、次のエラーを取得しています：

ERROR：明らかに

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; 

、Imはと間違って何かをすること：新しい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. 

にMY WebPACKの設定ファイルをスローをエラーによって通知されるように、マージ関数が返されたオブジェクトは正常であるように見えます。ここで設定OBJの出力である（メインwebpack.configのobjが。）：

コンフィギュレーション出力のOBJECT：

{ 
    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' 
}