WebpackOptionsValidationError 与 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"

我在尝试运行我的 server.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 server.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

WebpackOptionsValidationError 与 webpack-dev-middleware

WebpackOptionsValidationError with webpack-dev-middleware

express

webpack

babeljs

webpack-dev-server

webpack-dev-middleware