webpack基础用法

webpack npm 命令

npm webpack -v 查看webpack版本

npm webpack 文件名 打包文件

在package.json的script 可以配置执行webpack的指令

webpack介绍

1、可以解析文件之间的依赖关系（ESModule/Commonjs） 进行打包 webpack的运行环境是在node中

webpack配置文件

module.exports={
mode:'development',//打包后的代码在开发环境中，打包后的代码不会被压缩
entry:'./index.js',//打包的入口文件
output：{//打包之后文件的输入地址
path:'path.join(_dirname,'bundle')',//path必须是个绝对路经
}，
//处理非js之外的文件
		module:{
				rules:[
						{
							test:/\.gif$/,//匹配gif结尾
							use:[
									{	
										loader:'url-loader',
										options:{//在使用url-loader时可以进行的配置
										limit:8192,//小于8k将图片解析成base64，大于8k则处理成图片
										name:'[name],[hash:8].[ext]',//设计打包后文件的名字，hash值与文件格式
									}
								]
					},
					{
					test:/\.css$/,//匹配到css结尾
					use:['style-loader','css-loader'] //右边的代码先执行 从右向左
					},
					{
					test:/\.less$/,//匹配到less结尾
					use:['style-loader','css-loader','less-loader']
					}
				]
		}
}

url-loader
这个loader可以把图片解析成base64位格式的字符串
解析成base64格式字符串可以减少网络请求（只针对小图片）

css-loader
这个loader可以处理css文件 并解析css代码
style-loader
这个loader生成style标签 并把style标签插入到head标签后面
用到css-loader就要用style-loader不然会转成一个数据而不是样式