webpack常用配置整理(Loaders&Plugins)

本文详细介绍了Webpack的Loader配置,包括图片、字体和样式文件的处理。同时,探讨了Plugin的使用,如文件压缩、CSS提取、自动生成Index.html、清理文件夹、复制文件等,为优化构建过程提供了实用技巧。
摘要由CSDN通过智能技术生成

Loader

1. 图片处理

url-loader
将图片转换为base64 URI

{
   
	module:{
   
		rules: [
			{
   
				test: /\.(png|svg|jpg|gif)$/,
				use:[{
   
					loader:"url-loader",
					options:{
   
						limit: 5000,
              			outputPath: "images/",
              			name: "[name]-[hash:4].[ext]",
              			fallback: "file-loader"
					}
				}]
			}
		]
	}
}
  • fallback
    指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。
  • limit
    最大文件大小,单位bytes

2. 自定义字体处理

file-loader
处理使用import('url')require('url')引入的文件,将引入的文件输出至output目录

{
   
	module:{
   
		rules: [
			{
   
				test: /\.(woff|woff2|eot|ttf|otf)$/,
    			use: [
    				{
   
        				loader: "file-loader",
            			options: {
   
            				name: "[name]-[hash:4].[ext]",
                			outputPath: "fonts"
            			}
        			}
    			]
			}
		]
	}
}
  • name
    输出的文件名
name: '[name].[ext]'     //logo.png
name: '[hash].[ext]'      //3a9d7b3c4c00d76d9596a0194300cb94.png
name: '[hash:4].[ext]'      //3a9d.png
name: '[name]-[hase:4].[ext]'    //logo-3a9d.png
  • outputPath
    输出路径
    outputPath: './images/'
    output为相对路径。eg./dist/images/logo.png

3. 样式文件处理

{
   
	module:{
   
		rules: [
			{
   
        		test: /\.(scss|sass)$/,
        		use: ["style-loader", "css-loader", "sass-loader"]
      		}
		]
	}
}

less-loade

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值