Invalid configuration object. Webpack has been initialized using a configuration object that does no

Posted 2022-04-22 闲言博客

错误产生环境

webpack 打包时出错

错误描述

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[0] has an unknown property 'text'. These properties are valid:
   object  assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? 
   -> A rule description with conditions and effects for modules.

错误原因

配置webpack.config.js 文件时，节点名称输入错误。将test 输入为text标签

解决办法

修改前

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
const htmpPlugin = new HtmlWebpackPlugin(
  template: './src/index.html',
  filename: 'index.html'
)

module.exports = 
  //编译模式
  mode: 'development' // development  开发用（提高开发速度） | production
  ,
  //__dirname 代表当前文件所处的目录
  entry: path.join(__dirname,'./src/index.js'), //入口文件
  output: 
    path: path.join(__dirname,'./dist'),//输出文件存放路径
    filename: 'bundle.js'//输出文件名称
  ,
  devServer: 
    //....//
    static:                                
      directory: path.join(__dirname, './'),  
      watch: true
    
 ,// 配置预览界面插件
 plugins :[htmpPlugin],
 module : //配置打包非js的模块
   rules:[
     text: /\\.js$/,use: 'babel-loader',exclude: /node_modules/,
     test: /\\.css$/,use: ['style-loader','css-loader','postcss-loader'],
     test: /\\.less$/,use: ['style-loader','css-loader','less-loader'],
     test: /\\.scss$/,use: ['style-loader','css-loader','sass-loader']
    // test: /\\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: ['url-loader?limit=98428']
    // test: /\\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=98428'
  ]
 

修改后

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmpPlugin = new HtmlWebpackPlugin(
  template: './src/index.html',
  filename: 'index.html'
)

module.exports = 
  //编译模式
  mode: 'development' // development  开发用（提高开发速度） | production
  ,
  //__dirname 代表当前文件所处的目录
  entry: path.join(__dirname,'./src/index.js'), //入口文件
  output: 
    path: path.join(__dirname,'./dist'),//输出文件存放路径
    filename: 'bundle.js'//输出文件名称
  ,
  devServer: 
    //....//
    static:                                
      directory: path.join(__dirname, './'),  
      watch: true
    
 ,// 配置预览界面插件
 plugins :[htmpPlugin],
 module : //配置打包非js的模块
   rules:[
     text: /\\.js$/,use: 'babel-loader',exclude: /node_modules/,
     test: /\\.css$/,use: ['style-loader','css-loader','postcss-loader'],
     test: /\\.less$/,use: ['style-loader','css-loader','less-loader'],
     test: /\\.scss$/,use: ['style-loader','css-loader','sass-loader']
    // test: /\\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: ['url-loader?limit=98428']
    // test: /\\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=98428'
  ]