Webpack 配置错误 - 请帮我纠正

Posted 2023-02-19

【中文标题】Webpack 配置错误 - 请帮我纠正

【英文标题】：Webpack Configuration Error - please help me correct

【发布时间】：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',
        
      ,
    ],
  ,
;

【参考方案1】：

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

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