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;

显然，我正在通过错误通知合并函数做错了，但是，返回的对象似乎没问题。这是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'
}

Webpack 2配置错误

2 个答案: