通常我做网站时，会用到图片资源，那一般有两种引入方式，一是img标签的src属性，而是通过css的background-image属性来家在图片，那这两种模式我们怎么在webpack中打包呢？接下来就讲解图片的打包操作。
使用file-loader来处理图片
1.yarn add file-loader --dev。安装file-loader插件。
2.接着我们的项目，引入一张图片，并动态创建img标签将图片载入。
// src/js/image.js
// 在js同级目录下创建了images文件夹，添加了一张图片
import oneImage from '../images/1.jpg'
const createImage = () => {
// 创建一个div容器
const container = document.createElement('div');
// 创建img标签，通过require引入
const image = document.createElement('img');
image.src = oneImage;
image.width = 500;
container.appendChild(image);
return container;
}
document.body.appendChild(createImage());
// src/app.js
// 将处理图片的文件引入
import { start } from './js/start'
import './js/image'
start();
console.log('app.js被打包了')
3.修改webpack.config.js文件，添加对图片处理的规则。
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
use: ['file-loader']
}
通过上述步骤我们图片就被打包成功了，当然我们还有另外两种方式引入图片：
// src/js/image.js
// 通过require的方式导入
image.src = require('../images/1.jpg').default;
如果不想加default，则还需要修改webpack的配置，同样也能得到想要的结果
// src/js/image.js
image.src = require('../images/1.jpg')
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
那接下来我们尝试打包背景图片，添加一个标签，以及为他添加背景图片。
// src/css/image.css
.bg-image {
width: 100px;
height: 200px;
border: 1px solid red;
background: url('../images//1.jpg');
}
// src/js/image.js
import oneImage from '../images/1.jpg'
import '../css/image.css'
const createImage = () => {
// 创建一个div容器
const container = document.createElement('div');
// 创建img标签，通过require引入
const image = document.createElement('img');
image.src = oneImage;
image.width = 500;
container.appendChild(image);
// 创建img标签，用css添加background属性
const bgImage = document.createElement('img');
bgImage.className = 'bg-image';
container.appendChild(bgImage);
return container;
}
document.body.appendChild(createImage());
之后我们在重新打包，发现图片并没有加载进来，而且我们build的文件夹下还多了一个图片文件，这里就可以理解为css-loader在处理图片时会require这个图片，但是我们又没办法在css文件中加上default属性，所以我们需要修改的是css-loader里的配置。
// webpack.config.js
// 加上不做esModule的转换
{
loader: 'css-loader',
options: {
importLoaders: 1,
esModule: false
}
},
之后我们该怎么自定义打包完之后的图片名称以及路径呢？
我们还是要修改file-loader的参数。这里有一些关键字：
[ext]是文件扩展名。
[name]是文件的名称。
[hash: 4]生成4位的hash值。
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[hash:6].[ext]'
}
}
]
}
使用uril-loader来处理图片
1.yarn add url-loader --dev。安装url-loader插件。
2.我们直接把file-loader的规则改为url-loader来处理。
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
use: ['url-loader']
}
重新运行打包，我们发现在build文件夹下并没有图片产生，浏览器检查工具可以查看到是图片已经被转换为base64的图片资源了。可知url-loader默认是帮我们把所有图片资源转换为base64的资源直接加载的，当文件比较大时，这样做其实是不对的，所以我们要配置url-loader的属性。
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'url-loader',
options: {
name: 'images/[name].[hash:6].[ext]',
limit: 25 * 1024
}
}
]
}
我们限制了图片的大小，当超过这个大小时，就跟file-loader处理图片一样，当小于时，就转换为base64的资源。
使用webpack内置的asset模块直接来处理图片。
asset/resource --- file-loader
asset/inline --- url-loader
asset/source --- raw-loader
// webpack.config.js
// asset/resource打包图片类似于file-loader
{
test: /\.(png|svg|gif|jpe?g)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name].[hash:8].[ext]'
}
}
// webpack.config.js
// asset/inline打包图片类似于默认的url-loader
{
test: /\.(png|svg|gif|jpe?g)$/,
type: 'asset/inline',
}
那我们想限制大小选择输出图片类型呢？
// webpack.config.js
{
test: /\.(png|svg|gif|jpe?g)$/,
type: 'asset',
generator: {
filename: 'images/[name].[hash:8].[ext]'
},
parser: {
dataUrlCondition: {
maxSize: 150 * 1024
}
}
}
打包图片的知识我们就学习完啦！接下来就是打包字体啦！
