WebpackOptionsValidationError：无效的配置对象

Question

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

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

WebpackOptionsValidationError：无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - 配置具有未知属性'devtools'。这些属性是有效的：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将这些选项传递给loader：plugins：[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）在Object。 （/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/server/index.js:9:27）在loader./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）在Object的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 [email protected] babel-preset-es2015 babel-preset-react babel-loader或 yarn add [email protected] 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"
}