私が何を間違っているのかわからないので、この構成についての洞察をいただければ幸いです。次のエラーが表示されます。
エラー: 新しい 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' } }