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

中的

使用webpack-dev-middleware的WebpackOptionsValidationError

1 个答案: