hooyantsing's Blog

P07 打包图片资源

字数统计: 337阅读时长: 1 min
2020/11/28

尚硅谷2020最新版Webpack5实战教程

编写webpack配置文件

想要打包图片资源,需要使用到 url-loaderhtml-loader两个loader。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname,'build'),
publicPath:'./'

},
module: {
rules: [
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
// 处理图片资源
test:/\.(jpg|png|gif)$/,
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于kb,就会被base64处理
// 有点:减少请求数量(减轻服务器压力)
// 缺点:图片体积更大(文件请求速度更慢)
limit: 8 * 1024,

// webpack5 以后的版本,不存在以下问题:
// 问题:因为url-loader默认使用使用es6模块解析,html-loader引用图片是commonjs模块
// 解析时会出问题:[object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
// esModule: false

// 给图片重命名,取hash前10位
name: '[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode: 'development'
}

控制台下载loader依赖:

其中 url-loader 包含 url-loader 和 file-loader 两个依赖。

1
2
3
npm i url-loader -D
npm i file-loader -D
npm i html-loader -D
CATALOG
  1. 1. 编写webpack配置文件