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：无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - configuration.module有一个未知的属性'loaders'。这些属性是有效的：对象{exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, noParse ?,规则？，？，defaultRules ?, unknownContextCritical ?, unknownContextRecursive ?, unknownContextRegExp ?, unknownContextRequest ?, unsafeCache ?, wrappedContextCritical ?, wrappedContextRecursive ?, wrappedContextRegExp ?, strictExportPresence strictThisContextOnImports？ } - ＆GT;影响正常模块的选项（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）在loader（/ Users / yaelyanez / Google Drive / Proyectos / React / hello-world / node_modules / babel-register / lib / node.js：144：5） at 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）在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）错误的ERR！代码ELIFECYCLE 错误的ERR！错误1 错误的ERR！ hello-world@0.1.0 start：babel-node src/server 错误的ERR！退出状态1 错误的ERR！错误的ERR！在hello-world@0.1.0启动脚本失败。错误的ERR！这可能不是npm的问题。上面可能有额外的日志记录输出。

npm ERR！可以在以下位置找到此运行的完整日志：错误的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

应该是“装载机”而不是“装载机”。但无论如何，我会建议你使用webpack 4。

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

无法正确配置webpack 2.2.1，继续抛出WebpackOptionsValidationError

2 个答案: