webpack4系列笔记之（2）loader及打包图片资源

星雨668

已于 2022-06-10 15:21:10 修改

阅读量387

点赞数 1

分类专栏： webpack 文章标签： webpack npm javascript

于 2022-05-31 23:09:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42744920/article/details/125038061

版权

webpack 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了webpack的loader概念，由于webpack默认仅处理js和JSON，loader如file-loader和url-loader用于处理其他类型的文件，如图片。file-loader用于将图片转换并输出到指定目录，而url-loader在file-loader基础上增加了条件判断，当图片大小小于8KB时转为base64字符串内联，以减少HTTP请求。配置示例展示了如何在webpack.config.js中设置这两个loader。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、webpack的loader是什么？

webpack默认只能识别js和JSON文件，但是实际工作中会有很多类型的文件，比如：jpg、png、gif、css等，这时就需求loader来帮助webpack去识别翻译这些文件。

备注：本文node版本10.13.0 ，webpack版本4.26.0 webpack-cli版本3.1.2

二、file-loader打包图片资源

1、安装file-loader

npm i file-loader -D

2、配置 webpack.config.js

const path = require('path');
module.exports = {
	//  入口文件
	entry: './src/index.js',
	output: {
		// 输出文件名
		filename: 'built.js',
		// 输出文件路径
		path: path.resolve(__dirname,'dist')
	},
	// 配置loader模块
	module: {
		rules: [
			{
				// 找到项目中的图片资源
				test: /\.(jpg|png|gif)$/,
				use: {
					// 使用file-loader编译图片资源
					loader: 'file-loader'	,
					// loader的配置项
					options: {
					 	//  placeholder  占位符
						name: '[name].[ext]'，
						// 输出到的文件夹
						outputPath:'images/'
					}
				}
			}	
		]	
	},
	// 打包模式有两种：development和production；默认是production模式，会自定压缩代码
	mode: 'development'
}

三、url-loader打包图片资源

1、安装url-loader

npm i url-loader -D

2、配置 webpack.config.js

const path = require('path');
module.exports = {
	//  入口文件
	entry: './src/index.js',
	output: {
		// 输出文件名
		filename: 'built.js',
		// 输出文件路径
		path: path.resolve(__dirname,'dist')
	},
	// 配置loader模块
	module: {
		rules: [
			{
				// 找到项目中的图片资源
				test: /\.(jpg|png|gif)$/,
				use: {
					// 使用url-loader编译图片资源
					loader: 'url-loader'，
					// loader的配置项
					options:{
						//  placeholder  占位符
						name:'[name].[ext]',
						// 输出到的文件夹
						outputPath:'images/'
						// 小于8kb的图片，会转化成base64，减少http请求，
						// 大于8kb的图片，会通过file-loader编辑
						limit: 8 * 1024
					}
					
				}
			}	
		]	
	},
	// 打包模式有两种：development和production；默认是production模式，会自定压缩代码
	mode: 'development'
}

webpack系列笔记会持续更新，敬请关注