错误产生环境
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'}
]
}
}