webpack学习笔记【四】：打包图片资源

作者: 麻烦来一大碗猫 | 来源:发表于2021-08-10 11:06 被阅读0次

打包图片资源

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文件中也做了引入文件的输出。

参考webpack资源模块配置

网友评论

本文标题：webpack学习笔记【四】：打包图片资源

本文链接：https://www.haomeiwen.com/subject/vwkzvltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！