無法正確配置Webpack 2.2.1，請繼續拋出WebpackOptionsValidationError

Question

配置為：

對於.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？，wrappedContextCritical？，wrappedContextRecursive？，wrappedContextRegExpcursive？ ？，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。（匿名函數）[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） ），位於Function.Module.runMain（internal / modules /）的Function.Module._load（internal / modules / cjs / loader.js：498：3）的tryModuleLoad（internal / modules / cjs / loader.js：506：12） cjs / loader.js：695：10）。 （/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / babel-cli / lib / _babel-node.js：154：22）npm錯誤！ 代碼ELIFECYCLE npm ERR！ errno 1 npm錯誤！ 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

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/

Answer 2

應該是“ loader”而不是“ loaders”。 但無論如何，我還是建議您使用webpack 4。

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