打包图片资源
html内容，增加两张图片资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<div id="title">
webpack
</div>
</div>
<div id="image1"></div>
<div id="image2"></div>
</body>
</html>
css内容
其中 webpack.svg的大小为4KB，spon.jpeg大小为61KB
#image1 {
width: 200px;
height: 200px;
background-image: url(./images/webpack.svg);
background-repeat: no-repeat;
}
#image2 {
width: 200px;
height: 200px;
background-image: url(./images/spon.jpeg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
当时看的学习视频的资源各个版本如下：
{
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"less": "^4.1.1",
"less-loader": "^5.0.0",
"style-loader": "^1.1.3",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.12"
}
对上述资源打包执行 yarn build:dev 提示需要loader去处理下述资源。
webpack 4
file-loader
由于我们在引入图片资源的时候是通过url去访问图片地址的，这里我们就需要使用一个新的loader，file-loader去解析url，并将文件发出到输出文件夹。file-loader同样也可以解析import引入，require引入并将其解析成url。
这里我们使用的file-loader的版本如下：
{
"file-loader": "^5.0.2",
}
并配置 webpack.config.js
module.exports = {
...,
module: {
...,
rule: [
...,
{
test: /\.(svg|jpeg)$/,
use: 'file-loader'
}
],
},
};
执行 yarn build:dev 命令
执行构建命令以后dist文件夹下出现了两个新的文件，我们可以根据扩展名得知，将我们工程中引入的图片资源输出后生成新的文件，文件名称是file-loader默认生成的，规则是'[contenthash].[ext]'，即根据类容生成hash值去命名文件。自定义命名规则可以参考webpack官网关于file-loader的name部分
url-loader
url 可以将文件转换为 base64的URI，URI是统一资源标识符，我们可以理解为一个人的身份证号，我们熟悉的URL是统一资源定位符，通过文件位置标识出这个唯一确定的文件。
用url将文件转换为base64的URI其优点：
- base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
- 网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
- base64编码的字符串，更适合不同平台、不同语言的传输；
- 算法是编码, 不是压缩, 编码后只会增加字节数，但是算法简单, 几乎不会影响效率，算法可逆, 解码很方便, 不用于私密信息通信;
- 解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;
缺点
- base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
- 网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
- base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。
安装url-loader，现在使用的url-loader版本如下：
{
"url-loader": "^3.0.0",
}
修改图片打包的配置项：
module.exports = {
...,
module: {
...,
rule: [
...,
{
test: /\.(svg|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 6 * 1024,
},
},
],
}
],
},
};
url-loader 本身依赖与file-loader，所以配置打包项的时候我们只用引用url-loader。但file-loader的依赖还是需要安装的。url-loader的配置项中，limit指定文件的最大体积（以字节为单位）。 如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。如果小于limit的限制，那文件将会被转换为base64URI。
执行yarn build:dev, dist文件夹下新增了一条jpeg的图片，该图片大小由于大于6 * 1024，所以直接传给file-loader进行处理。没有通过url-loader去做转换。
而 svg图片，被转换成 base64 URI
webpack 5
更新各个依赖为最新版本，webpack 5 废弃了url-loader 和 file-loader 考虑使用asset modules资源模块代替，我们可以将依赖中的url-loader 和 file-loader 删除并重新下载依赖
{
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"style-loader": "^3.2.1",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2"
}
并将webpack.config.js中的url-loader相关配置删除
执行yarn build:dev，可以成功打包
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
在 webpack 5 之前，通常使用：
- raw-loader 将文件导入为字符串
- url-loader 将文件作为 data URI 内联到 bundle 中
- file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
- asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
- asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
根据官网的介绍，我们可以通过asset 去实现配置资源体积限制。效果等同于webpack4的url-loader去限制文件大小。
module.exports = {
...,
module: {
...,
rule: [
...,
{
test: /\.(svg|jpeg)$/,
type: 'asset',
}
],
},
};
执行 yarn build:dev，执行后生成的dist文件结构如下，输出的index.js中，webpack.svg已经被转换成base64 URI的状态了。
打包html中的图片资源
html中的内容，同时取消引入各种css和less资源，单纯去讨论img标签引入图片的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./images/spon.jpeg" alt="">
</body>
</html>
执行yarn build:dev后打包的资源如下图所示：
可以看到，打包后的资源只有index.js 和 index.html，显然此时打开dist文件夹下的html文件，不会有图片显示。
这时需要引入一个新的loader，html-loader。
默认情况下，每个可加载属性（例如 - <img src="image.png"> ）都将被导入（ const img = require ('./image.png') 或 import img from "./image.png"" ）。 你可能需要为配置中的图片指定 loader（推荐使用 asset modules）。
安装html-loader，npm install html-loader -D
在webpack.config.js中配置
module.exports = {
...,
module: {
...,
rule: [
...,
{
test: /\.html$/,
use: 'html-loader'
}
],
},
};
执行打包命令 yarn build:dev，可以看见输出中已经包含引入的图片，同时html文件中也做了引入文件的输出。
