DaMeng

Webpack 处理图片

发表于 更新于 分类于 ，

使用图片的场景：

  • 在 JS 中创建图片： new Image()
  • 在 CSS 中使用背景图片：background: url('image.png')
  • 在 HTML 中通过 src 等属性引用图片 <img src="image.png" >

1 file-loader

1.1 作用

file-loader 会解析导入文件语句 import / require ，将 url 参数文件输出到 output 目录。

1.2 安装

1
npm install file-loader --save-dev

1.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

1.4 使用

index.js

1
2
3
4
5
6
7
8
9
10
// file-loader 会将 test.png 输出到 output 目录，并取一个新名字，img 为新创建图片的名字
import img from "./test.png";
import "./index.css";

let image = new Image();
console.log("image name:", img);
image.src = img;
document.body.appendChild(image);


index.css

1
2
3
4
5
6
7
#hello {
	background-image: url("./test.png");
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
}

2 url-loader

2.1 作用

url-loader 内部默认使用 file-loader。当文件小于 limit 属性设置时，可以将文件编译成 DataURI（可以减少 HTTP 请求），否则将使用 file-loader 来编译文件。

2.2 安装

1
npm install url-loader --save-dev

2.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
	rules: [
		{
			test: /\.(png|jpe?g|git)$/i,
			use: [
				{
					loader: "url-loader",
					options: {
						limit: 8 * 1024, //当图片小于  8 * 1024 字节时，将图片转换成 base64，否则使用 file-loader 处理
					},
				},
			],
		}
	],
},

2.4 使用

同 file-loader

3 html-loader

3.1 作用

html-loader 可以将 HTML 导出为字符串，并支持压缩。

对于 HTML 文件中的可加载属性（如 <img src="image.png">），html-loader 会将其转换为导入语句（如 const img = require ('./image.png') 或 import img from "./image.png"" ）。

默认支持如下标签和属性：

  • audio 标签的 src 属性
  • embed 标签的 src 属性
  • img 标签的 src 属性
  • img 标签的 srcset 属性
  • input 标签的 src 属性
  • link 标记的 href 属性（仅适用于样式表）
  • object 标签的 data 属性
  • script 标签的 src 属性
  • source 标签的 src 属性
  • source 标签的 srcset 属性
  • track 标记的 src 属性
  • video 标签的 poster 属性
  • video 代码的 src 属性

3.2 安装

1
npm install --save-dev html-loader

3.3 配置

1
2
3
4
5
6
7
8
module: {
	rules: [
		{
			test: /\.html/,
			use: "html-loader",
		},
	],
},

3.4 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello html-webpack-plugin</title>
</head>

<body>
  <div id="hello">hello </div>
  <div>
    <img src="./img/src/test.png" alt="">
  </div>

</body>

</html>