[JavaScript知识库] 5、图片的加载（url-loader）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 5、图片的加载（url-loader） -> 正文阅读

[JavaScript知识库]5、图片的加载（url-loader）

图片的加载（url-loader）

1、下载依赖包：yarn add url-loader file-loader -D

yarn add url-loader file-loader -D

2、配置loader

	module: {
		rules: [
			// (1)配置css文件解析
			{
				test: /\.css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
						options: { publicPath: '../' }
					},
					'css-loader'
				]
			},
			// (2)配置less文件解析
			{
				test: /\.less$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
						options: { publicPath: '../' }
					}, 'css-loader', 'less-loader'
				]
			},
			// (3)配置图片解析
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							name: '[name].[ext]',
							publicPath: '../image/',
							outputPath: 'images/',
							limit: 8 * 1024,
						}
					}
				]
			},
		]
	}