浅谈 Webpack 如何处理图片(开发、打包、优化)
在Web开发中，图片作为Web页面重要的组成部分，在Webpack中如何处理图片是一个必须要掌握的技能。常见的处理方式包括以下几种：
1. 在代码中使用 import 或 require 导入图片
Webpack支持将图片（包括PNG、JPG、GIF、SVG等格式）作为模块来处理，并通过模块化的方式导入。
首先在webpack.config.js中配置url-loader和file-loader：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 图片小于10kb将被转为base64编码
name: '[name].[hash:7].[ext]' // 图片名称的规则
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 文件小于10kb将被转为base64编码
name: '[name].[hash:7].[ext]' // 文件名称的规则
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 字体文件小于10kb将被转为base64编码
name: '[name].[hash:7].[ext]' // 字体文件名称的规则
}
}
然后在JS代码中import或require图片，如下所示：
import logo from './logo.png';
function createImgElement(url) {
var img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
}
createImgElement(logo);
在Webpack中，url-loader会自动将小于指定大小limit的图片转换为Base64编码，并返回一个data URL，可以直接作为图片资源使用。
2. 在HTML代码中使用图片
在HTML代码中使用图片，可以通过Webpack中的html-loader实现。
首先在webpack.config.js中配置html-loader，将其加入到module的规则列表中：
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
collapseWhitespace: true
}
}
]
}
然后在HTML代码中使用import或require导入图片，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack HTML Loader</title>
</head>
<body>
<img src="${require('./assets/logo.png')}">
</body>
</html>
通过require导入图片的URL，Webpack会将图片移动到输出目录，并生成一个新的URL，然后使用HTML代码替换原始URL。
3. 优化图片加载
虽然在Webpack中使用url-loader将图片转换为Base64编码可以减少HTTP请求，但是对于一些大的图片或者访问较多的网站来说，这会带来性能问题。
对于这种情况，可以将图片分离出来，使用file-loader将图片输出到单独的文件，然后使用image-webpack-loader对图片进行优化，在网络带宽和加载时间之间取得平衡。
首先安装image-webpack-loader：
npm install image-webpack-loader --save-dev
然后在Webpack配置文件中加入image-webpack-loader：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[hash:7].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
在这里，我们使用了mozjpeg、pngquant等插件对图片进行了优化，可以根据实际情况选择性开启。
示例一：在代码中使用 require 导入图片
import bigImg from './assets/big.jpg';
var img = new Image();
img.src = bigImg;
document.body.appendChild(img);
在Webpack配置文件中加入对图片的处理规则，然后运行Webpack打包，此时big.jpg将会被打包到输出文件夹下。
示例二：在HTML中使用图片
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Image optimization</title>
</head>
<body>
<img src="${require('./assets/small.jpg')}">
</body>
</html>
在Webpack配置文件中加入对HTML的处理规则，然后运行Webpack打包，此时small.jpg将会被优化，并且被复制到输出文件夹下。
通过以上两个示例，我们可以了解到Webpack在处理图片的过程中，可以在代码中使用import/require导入、在HTML中使用图片，并且通过优化插件可以对图片进行优化，提高页面性能。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈 Webpack 如何处理图片(开发、打包、优化) - Python技术站
微信扫一扫 
支付宝扫一扫 