webpack学习记录(六)-图片处理

webpack学习记录(六)-图片处理

图片处理

图片引入方式有三种：在js中创建图片并引入，在css中引入background('url')方式来引入，以及在html中直接写死。

在js中使用

import logo from './logo.png'	//返回的结果是一个新的图片地址
let image = new Image()
image.src = logo
document.body.appendChild(image)

这种方式需要使用file-loader,file-loader默认会在内部生成一张图片到dist目录下

npm i file-loader -D

配置

webpack.config.js

module.exports = {
	module: {
		rules: [
			{
				test: /\.(png|jpg|gif)$/,
				use: 'file-loader'
			}
		]
	}
}

在css中使用

body{
	background: url("./logo.png")
}

在css中可以直接使用

在html中使用

html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。使用 html-withimg-loader 解决这个问题，图片会被打包，而且路径也处理妥当。额外提供html的include子页面功能。

安装及配置

npm i html-withimg-loader -S

这个loader和file-loader最新版本不兼容，file-loader@3.0.1才可以配合使用。

module.exports = {
	module: {
		rules: [
			{
				test: /\.html$/,
				use: 'html-withimg-loader'
			},
            {
                test: /\.(png|jpg|gif)$/,
				use: 'file-loader'			
            }
		]
	}
}

注意

有时候图片上的页面非常小，我们不希望它发送http请求，这时候我们可以把它变成base64编码格式，因此我们一般不使用file-loader来处理图片，一般使用url-loader

安装及配置

npm i url-loader -D

与html-withimg-loader使用时，要安装url-loader@2.0.1版本

webpack.config.js

module.exports = {
	rules: [
		{
			test: /\.(png|jpg|gif)/,
			//使用这个loader可以做一个限制，当我们的图片小于多少k的时候用base64来转换，大于这个限制的
			//的话则使用file-loader
			use: {
				loader: 'url-loader',
				options: {
					limit: 200*1024		//当图片小于200k的时候用base64转换
				}
			} 
		}
	]
}