Webpack 配置错误 - 请帮我纠正答案

【问题标题】：Webpack Configuration Error - please help me correctWebpack 配置错误 - 请帮我纠正
【发布时间】：2021-04-23 16:44:24
【问题描述】：

回购：https://github.com/BraveNewWorld99/reactbootstrap

我正在使用 webpack 5.15.0

我在 powershell 中运行“node index.js”并收到以下错误消息：

ValidationError：配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

configuration.module.rules[0] 应该是以下之一：["..." |对象{编译器？，依赖？，descriptionData？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？，mimetype？，oneOf？，选项？，解析器？，realResource？，解析？，资源？，resourceFragment？，resourceQuery？，规则？，sideEffects？，测试？，类型？，使用？ }, ...] -> 一条规则。细节： configuration.module.rules[0].loader 应该是一个非空字符串。 -> 加载器请求。

这是我的 webpack.config.js

    module.exports = {
  entry: [
    './main.js',
  ],
  output: {
    path: '/',
    filename: 'main-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {loader: ['babel-loader']}
      },
      { test: /\.css$/, use: {loader: 'style-loader!css-loader' }},
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'file-loader' }},
      {
        test: /\.(woff|woff2)$/,
        use: {loader: 'url-loader',
        options: {
          prefix: 'font/',
          limit: '5000',
        }}
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: {loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'application/octet-stream',
        }}
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: {loader: 'url-loader',
        options: {
          limit: '10000',
          mimetype: 'image/svg+xml',
        }}
      },
    ],
  },
};

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

您的第一条规则定义错误。您已经设置了一个数组，而不是配置中的字符串。试试：loader: 'babel-loader'。

  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {loader: 'babel-loader'}
  },

【讨论】：