javascript - 无法正确配置Webpack 2.2.1，请继续抛出WebpackOptionsValidationError

配置为：

对于.babelrc

{
 "presets": ["react", "es2015", "stage-0"],
 "env": {
 "development": {
  "presets": ["react-hmre"]
  }
 }
}

对于Web pack.config.dev.js：

// Dependencies
import webpack from 'webpack';
import path from 'path';

// Paths
const PATHS = {
 index: path.join(__dirname, 'src/index'),
 build: path.join(__dirname, '/dist'),
 base: path.join(__dirname, 'src')
};

export default {
 devtool: 'cheap-module-eval-source-map',
 entry: [
  'webpack-hot-middleware/client?reload=true',
  PATHS.index
 ],
 output: {
  path: PATHS.build,
  publicPath: '/',
  filename: 'bundle.js'
},
plugins: [
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin()
],
module: {
 loaders: [{
   test: /\.js?$/,
   loaders: ['babel-loader'],
   include: PATHS.base
  },
  {
   test: /(\.css)$/,
   loaders: ['style-loader', 'css-loader']
  },
  {
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  }]
 }
};

这是针对服务器文件的：

// Dependencies
import express from 'express';
import webpack from 'webpack';
import path from 'path';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import open from 'open';

// Webpack Configuration
import webpackConfig from '../../webpack.config.dev';

// Server Port
const port = 3000;

// Express app
const app = express();

// Webpack Compiler
const webpackCompiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(webpackCompiler));
app.use(webpackHotMiddleware(webpackCompiler));

// Sending all the traffic to React
app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, '../public/index.html'));
});

// Listen port 3000
app.listen(port, err => {
 if (!err) {
  open(`http://localhost:${port}`);
 }
});

这是我得到的错误：

抛出新的WebpackOptionsValidationError（webpackOptionsValidationErrors）;
        ^

WebpackOptionsValidationError：无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。
 -configuration.module具有未知的属性“ loaders”。这些属性有效：
   对象{exprContextCritical？，exprContextRecursive？，exprContextRegExp？，exprContextRequest？，noParse ?、规则？，defaultRules？，unknownContextCritical？，unknownContextRecursive？，unknownContextRegExp？，unknownContextRequest？，unsafeCache？，wrappedContextContextCritical？，wrappedContextRecursive？，wrappedContextRegExps？，strictExport strictThisContextOnImports？ }
   ->影响普通模块（NormalModuleFactory）的选项。
    在webpack上（/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / webpack / lib / webpack.js：24：9）
    在对象。 （/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / src / server / index.js：19：25）
    在Module._compile（内部/模块/cjs/loader.js:654:30）
    在加载程序上（/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / babel-register / lib / node.js：144：5）
    在Object.require.extensions。（匿名函数）[作为.js]（/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / babel-register / lib / node.js：154：7）
    在Module.load（internal / modules / cjs / loader.js：566：32）
    在tryModuleLoad（内部/模块/cjs/loader.js:506:12）
    在Function.Module._load（内部/模块/cjs/loader.js:498:3）
    在Function.Module.runMain（内部/模块/cjs/loader.js:695:10）
    在对象。 （/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / babel-cli / lib / _babel-node.js：154：22）
npm ERR！代码ELIFECYCLE
npm ERR！ errno 1
npm ERR！ hello-world@0.1.0开始：babel-node src/server
npm ERR！退出状态1
npm ERR！
npm ERR！在hello-world@0.1.0启动脚本处失败。
npm ERR！ npm可能不是问题。上面可能还有其他日志记录输出。

npm ERR！可以在以下位置找到此运行的完整日志：
npm ERR！ /Users/yaelyanez/.npm/_logs/2018-04-23T20_57_21_731Z-debug.log

最佳答案

您的配置文件的webpack模块配置不正确。
您应该编写规则而不是加载程序。
配置示例应如下所示：

module: {
 rules: [{
   test: /\.js?$/,
   loaders: ['babel-loader'],
   include: PATHS.base
  },
  {
   test: /(\.css)$/,
   loaders: ['style-loader', 'css-loader']
  },
  {
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  }]
 }

还要在CommonJS中编写您的webpack配置文件。有关更多配置详细信息，请参阅webpack文档。 https://webpack.js.org/concepts/configuration/

关于javascript - 无法正确配置Webpack 2.2.1，请继续抛出WebpackOptionsValidationError，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49989855/