webpack4+babel7入門到精通(4、圖片的加載)

時間 2019-12-06

標籤 webpack4+babel7 webpack babel 入門精通圖片加載简体版

原文原文鏈接

1、使用`file-loader`加載圖片

一、安裝包css
```
npm install file-loader -D
複製代碼
```

二、在js中使用html

let src = require('./images/default.jpeg');
let img = new Image();
img.src = src;
document.body.appendChild(img);
複製代碼

三、配置規則webpack

{
	test: /\.(png|jpg|gif|svg|bmp|jpeg)$/,
	use: 'file-loader',
},
複製代碼

2、在`css`文件中寫背景圖片

一、樣式文件web

#box {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  background: url('./../images/default.jpeg');
  background-size: cover;
}
複製代碼

二、在webpack.config.js中須要配置shell

...
{
	test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
	use: [
		{
			loader: 'url-loader',
			options: {
				limit: 5 * 1024, // 指定多大的圖片
				outputPath: 'images', // 指定拷貝文件輸出目錄
				publicPath: '../../images/', // 根據webpack根目錄跳轉到圖片路徑
				// name: '[name].[hash:8].[ext]',
			}
		}
	]
},
...
複製代碼

3、若是要在頁面中直接使用圖片標籤

一、安裝包npm

npm install html-withimg-loader -D
複製代碼

二、配置規則app

{
	test: /\.(html|htm)$/,
	use: [
		{
			loader: 'html-withimg-loader',
		}
	]
}
複製代碼

三、使用svg

<img src="./images/default.jpeg" width="200" height="200"/>
複製代碼

4、使用`base64`處理圖片

一、file-loader是解析圖片地址,把圖片從源位置拷貝到目標位置而且修改源引用ui

二、url-loader能夠將比較小的文件,直接轉換爲base64字符串嵌套在頁面中url

{
	test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
	use: [
		{
			loader: 'url-loader',
			options: {
				limit: 5 * 1024, // 指定多大的圖片
				outputPath: 'images/', // 指定拷貝文件輸出目錄
			}
		}
	]
},
複製代碼