项目开发：一般可以分为两种模式，一种是开发模式（“开发环境”），另外一种叫生成模式（“生产环境”）
开发环境：当我们在开发项目阶段，这个过程中我们使用开发服务器来打包项目，这个环境就是开发环境。
生产环境：项目开发完成了，我们需要通过 npm run build 打包我的项目，这个时候就叫做生产环境
module.exports={
//开发环境用development表示，生产环境用production表示
mode:"development",
entry:"./src/main.js",
plugins:[
new HtmlWebpackPlugin({
//template:模板，也就是将来打包的到dist文件中的html是根据这个模块html生成的
//如果没有配置模板，会自动生成有个html打包到dist文件中
template:'./pubilc/index.html'
})
]，
module:{
rules:[//专门用于配置加载器的地方
{//处理css文件
test:/.css$/i//正则表达式，表示匹配以.css结尾的文件,i表示不区分大小写
//注意：这两个加载的书写顺序不能改变
use:['style-loader','css-loader']//表示用我们下载的两个加载器来处理css文件。
},
{//处理less文件
test：/.less$/,
use:['style-loader','css-loader','less-loader']
},
{//处理图片
test:/.(png|jpg|gif|jpeg)$/i,
//利用webpack5的asset module技术实现webpack处理图片
//当图片小于8kb的时候，将图片转base64打包进js代码中
//大于8kb，直接输入文件
type:'asset'
},
{//处理字体图标文件
test：/.(eot|svg|tff|woff|woff2)$/,
type:'asset/resource',
generator:{
//[name]:表示获取到文件的原名字
//[hash:6]：表示生产6位数字的哈希值
//hash(哈希):由字母和数字构成的随机字符串就叫哈希值
//[ext]:表示获取原文件的后缀名
//对打包的字体图标文件进行重命名
filename:'font/[name].[hash:6][ext]',
}
},
{//语法进行降级处理
test:/.js$/,
//排出不需要降级处理的js文件，
//比如我们下载在node_modules文件中的第三方包
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
]
},
//devServer就是专门用来设置开发服务器相关的配置的地方
devServer:{
port:3000//设置端口号为3000
}
}
\
