错误产生环境

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'}
  ]
 }
}