无法正确配置 webpack 2.2.1，不断抛出 WebpackOptionsValidationError答案

【问题标题】：Cannot configure webpack 2.2.1 correctly, keep throwing WebpackOptionsValidationError无法正确配置 webpack 2.2.1，不断抛出 WebpackOptionsValidationError
【发布时间】：2018-10-04 00:24:28
【问题描述】：

配置是：

对于.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：配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.module 有一个未知的属性 'loaders'。这些属性是有效的： object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, WrappedContextCritical?, WrappedContextRecursive?, WrappedContextRegExp?, strictExportPresence?, 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 (internal/modules/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.(anonymous function) [as .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 (internal/modules/cjs/loader.js:506:12) 在 Function.Module._load (internal/modules/cjs/loader.js:498:3) 在 Function.Module.runMain (internal/modules/cjs/loader.js:695:10) 在对象。 (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/node_modules/babel-cli/lib/_babel-node.js:154:22) npm 错误！代码生命周期 npm 错误！错误号 1 npm 错误！ hello-world@0.1.0 开始：babel-node src/server npm 错误！退出状态 1 npm 错误！ npm 错误！在 hello-world@0.1.0 启动脚本中失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

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

【问题讨论】：

标签： javascript node.js reactjs npm webpack

【解决方案1】：

应该是“loader”而不是“loaders”。但我还是建议你使用 webpack 4。

loaders: [{ 
  test: /\.js?$/, 
  loader: 'babel-loader',
  include: PATHS.base 
},
{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader']
}, ...

【讨论】：

【解决方案2】：

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

【讨论】：