首页 > 其他分享> 文章详细

webpack基础用法

2021-05-13 15:01:58 阅读：157 来源： 互联网

标签：文件 style 基础 loader webpack 打包用法 css

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不然会转成一个数据而不是样式

标签：文件,style,基础,loader,webpack,打包,用法,css
来源： https://blog.csdn.net/weixin_43992788/article/details/116741589

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack基础用法