Webpack 2 配置错误答案

【问题标题】：Webpack 2 Configuration ErrorWebpack 2 配置错误
【发布时间】：2016-11-15 11:43:02
【问题描述】：

我不确定我做错了什么，希望能对此配置有所了解。我收到以下错误：

错误：抛出新的 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' } }

【问题讨论】：

标签： javascript build webpack webpack-dev-server webpack-2

【解决方案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

【讨论】：

webpack 模式提示是一个很好的提示。谢谢，是的，这解决了这部分问题:)

【解决方案2】：

正如您所怀疑的，罪魁祸首是merge 函数。 enforce 属性是 rule 对象的一部分。它不应该是UseEntry 的属性。

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

【讨论】：

感谢您的指导。