WebpackOptionsValidationError with webpack-dev-middleware

Question

除了发布所有代码之外，我不知道如何解决这个问题，我已经拔头发几个小时了。我找不到任何关于此的内容，但我觉得我只是错过了一些东西，例如可能使用较新版本和较旧的教程。

我正在使用以下开发依赖项：

"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"html-webpack-plugin": "^2.29.0",
"webpack": "^3.1.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"

我在尝试运行服务器时收到此错误.js

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised
using a configuration object that does not match the API schema.
- configuration has an unknown property 'default'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, ex
ternals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, reco
rdsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target
?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rule
s.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options
to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /.xxx$/, // may apply this only for some modules
options: {
default: ...
}
})
]
at webpack (/Users/tworadon/dev/projects/pixie-matter/node_modules/webpack/lib/webpac
k.js:19:9)
at Object.<anonymous> (/Users/tworadon/dev/projects/pixie-matter/server.js:28:38)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3

这是我的ES6服务器.js文件：

import path from 'path';
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import * as config from './webpack.base.config.js';
const app = express(),
compiler = webpack(config),
isDevelopemt = process.env.NODE_ENV !== 'production',
DEFAULT_PORT = 3000,
DIST_DIR = path.join(__dirname, 'dist'),
HTML_FILE = path.join(DIST_DIR, 'index.html');
app.set('port', process.env.PORT || DEFAULT_PORT);
if (isDevelopemt) {
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.get('*', (req, res, next) => {
compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
if (err) {
return next(err);
}
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
} else {
app.use(express.static(DIST_DIR));
app.get('*', (req, res) => res.sendFile(HTML_FILE));
}
app.listen(app.get('port'));

// var express = require('express');
// var app = express();
// var path = require('path');
//
// var port = process.env.PORT || 8080;
//
// app.use('/', express.static('dist'))
//
// app.get('/', function(req, res) {
//     res.sendFile(path.join(__dirname + '/dist/index.html'));
// });
//
// app.listen(port, function() {
//   console.log('Serving index.html on port ' + port);
// });

这是我的webpack.base.config.js文件：

const path = require("path"),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
const TITLE = 'Pixie Matter',
// DIST_DIR   = path.join(__dirname, "dist"),
CLIENT_DIR = path.join(__dirname, "src");
module.exports = {
// context: CLIENT_DIR,
entry: "./src/main.js",
output: {
path: path.join(__dirname, "dist"),
publicPath: '/',
filename: "bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
title: TITLE
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
DEBUG: false
})
],
devtool: 'eval',
stats: {
colors: false
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['env']
}
//   use: {
//     loader: 'babel-loader'
//   }
}
]
}
};

这是webpack.prod.config.js

const webpack = require('webpack'),
baseConfig = require("./webpack.base.config.js");
baseConfig.devtool = "cheap-module-source-map";
module.exports = baseConfig;

Answer 1

尝试更改

import * as config from './webpack.base.config.js

自

import config from './webpack.base.config.js';

在server.js