Question

我正在通过在线课程，当我尝试运行我的服务器时，我收到此错误但无法解决原因：

/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/webpack/lib/webpack.js:19 抛出新的WebpackOptionsValidationError（webpackOptionsValidationErrors）; ^

WebpackOptionsValidationError：无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - 配置具有未知属性＆＃39; devtools＆＃39;。这些属性是有效的： object {amd？，bail？，cache？，context？，dependencies？，devServer？，devtool ?, entry，externals？，loader？，module ?, name？，node？，output？，parallelism？，performance？，plugins ？，profile？，recordsInputPath？，recordsOutputPath？，recordsPath？，resolve？，resolveLoader？，stats？，target？，watch？，watchOptions？ } 错别字：请纠正。对于加载程序选项：webpack 2不再允许配置中的自定义属性。应该更新加载程序以允许通过module.rules中的加载程序选项传递选项。在加载器更新之前，可以使用LoaderOptionsPlugin将这些选项传递给加载器：插件：[ new webpack.LoaderOptionsPlugin（{ // test：/.xxx$ /，//可能仅适用于某些模块选项：{ devtools：... } }） ] - configuration.resolve.extensions [0]不应为空。在webpack上（/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/webpack/lib/webpack.js:19:9）在对象。（/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/server/index.js:9:27）在Module._compile（module.js：573：30）在loader（/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-register/lib/node.js:144:5）在Object.require.extensions。（匿名函数）[as .js]（/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-register/lib/node.js:154:7）在Module.load（module.js：507：32）在tryModuleLoad（module.js：470：12）在Function.Module._load（module.js：462：3）在Function.Module.runMain（module.js：609：10）在对象。（/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-cli/lib/_babel-node.js:154:22） [nodemon]应用程序崩溃 - 在开始之前等待文件更改...

这是我的webpack配置文件：

import path from 'path';

export default {
    devtools: 'eval-source-map',
    entry: path.join(__dirname, '/client/index.js'),
    output: {
        path: '/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.join(__dirname, 'client'),
                loaders: [ 'babel' ]
            }
        ]
    },
    resolve: {
        extensions: [ '', '.js' ]
    }
}

Answer 1

首先，向我们提供有关 webpack配置文件名称的信息。默认名称为：webpack.config.babel.js

其次，在复制并粘贴代码段运行之前，我对您的webpack文件进行了一些更改：npm install webpack@2.3 babel-preset-es2015 babel-preset-react babel-loader 或
yarn add webpack@2.3 babel-preset-es2015 babel-preset-reac babel-loader，然后尝试我的代码：

import path from 'path';
import webpack from 'webpack';

const config =  {
    devtools: 'eval-source-map',
    entry: path.join(__dirname, '/client/index.js'),
    output: {
        path: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                include: path.join(__dirname, 'client'),
                loader: 'babel-loader',
                options: {
                  presets: [['es2015', { modules: false }], 'react'],
                },
            }
        ]
    },
    resolve: {
        extensions: [ '', '.js' ]
    }
}

module.exports = config;

如果仍然无效，请带上你的package.json文件和输出错误。

我希望它有所帮助

Answer 2

当我使用最新的webpack和最新的webpack-dev-server时，我遇到了同样的问题。我使用的是旧版本，问题已修复。

的package.json

"devDependencies": {
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
}

WebpackOptionsValidationError：无效的配置对象

2 个答案: