0

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

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

"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;
4

1 回答 1

1

尝试改变

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

至

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

在server.js

于 2017-07-15T21:35:14.247 回答