javascript - 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;

显然，正如错误所通知的，我对合并函数做了一些错误，但是，返回的对象似乎没问题。这是配置对象(主要的 webpack.config 对象)的输出:

配置输出对象:

{
  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