无法正确配置webpack 2.2.1,继续引发WebpackOptionsValidationError

Question

配置如下：

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

// 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：无效的配置对象。Webpack是使用与API模式不匹配的配置对象初始化的。-Configuration.Module具有未知属性“Loaders”。这些属性是有效的：对象{exprContextCritical？,exprContextRecursive？,exprContextRegexp？,exprContextRegext？,noppress？,rules？,defaultrules？,unknownContextRegressive？,unknownContextRegressive？,unknownContextRegext？,unsafecache？,wrappedContextRegressive？,wrappedContextRegressive？,wrappedContextRegressive？,在webpack(/users/yaelyanez/google drive/proyectos/react/hello-world/node_modules/webpack/lib/webpack.js:24:9)在object。(/users/yaelyanez/google drive/proyectos/react/hello-world/src/server/index.js:19:25)在module._compile（internal/modules/cjs/loader.js:654:30)在loader（/users/yaelyanez/google drive/proyectos/react/hello-world/node_register/lib/node.js:144:5)在object.require.extensions.（匿名函数）[as.js]（internal/module/cjs/loader.js:566:32）在tryModuleLoad（internal/module/cjs/loader.js:506:12)在function.module._load（internal/module/cjs/loader.js:498:3)在function.module.runmain（internal/module/cjs/loader.js:695:10)在object。(/users/yaelyanez/google drive/proyectos/react/hello-world/node_modules/babel-cli/lib/_babel-node.js:154:22)npm err！代码ELIFECYCLE npm错误！错误1 npm错误！Hello-world@0.1.0 start:babel-node src/servernpm err！退出状态1 npm错误！npm错误！在hello-world@0.1.0启动脚本中失败。npm错误！这可能不是NPM的问题。上面可能有额外的日志记录输出。

npm错误！此运行的完整日志可以在：npm err！/users/yaelyanez/.npm/_logs/2018-04-23t20_57_21_731z-debug.log

Answer 1

您的配置文件对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/