Webpack基础应用篇 -[9]管理资源(下)

1.6.4 加载 images 图像

假如，现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？在 webpack 5 中，可以使用内置的 Asset Modules，我们可以轻松地将这些内容混入我们的系统中，这个我们在"资源模块"一节中已经介绍了。这里再补充一个知识点，在 css文件里也可以直接引用文件，修改 style.css 和入口 index.js：

.block-bg {background-image: url(./assets/webpack-logo.svg) ;
}

block.style.cssText = `width: 200px; height: 200px; background-color: #2b3a42`
block.classList.add('block-bg')

07-manage-assets/src/style.css

.hello {background-color: #f9efd4;
}.block-bg {background-image: url(./assets/webpack-logo.svg) ;
}

07-manage-assets/src/index.js

// 导入模块
//...
import './style.css'//...
block.style.cssText = `width: 200px; height: 200px; background-color: #2b3a42`
block.textContent = exampleText
block.classList.add('block-bg')
document.body.appendChild(block)//...

启动服务，打开浏览器：

编辑切换为居中

添加图片注释，不超过 140 字（可选）

我们看到，通过样式把背景图片加到了页面中。

1.6.5 加载 fonts 字体

那么，像字体这样的其他资源如何处理呢？使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，也包括字体。让我们更新 webpack.config.js 来处理字体文件：

module: {rules: [{test: /.(woff|woff2|eot|ttf|otf)$/i,type: 'asset/resource',},]
}

07-manage-assets/webpack.config.js

//...module.exports = {
//...// 配置资源文件module: {rules: [//...{test: /.(woff|woff2|eot|ttf|otf)$/i,type: 'asset/resource',},],},//...
}

在项目中添加一些字体文件：

编辑

添加图片注释，不超过 140 字（可选）

配置好 loader 并将字体文件放在合适的位置后，你可以通过一个 @font-face 声明将其混合。本地的 url(…) 指令会被 webpack 获取处理，就像它处理图片一样：

@font-face {font-family: 'iconfont';src: url('./assets/iconfont.ttf') format('truetype');
}.icon {font-family: "iconfont" !important;font-size: 30px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

07-manage-assets/src/style.css

@font-face {
font-family: 'iconfont';
src: url('./assets/iconfont.ttf') format('truetype');
}.hello {
background-color: #f9efd4;
}.icon {
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.block-bg {
background-image: url(./assets/webpack-logo.svg);
}

const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)

07-manage-assets/src/index.js

// 导入模块
//...const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)

启动服务，打开浏览器：

我们再打包一下，看看输出的文件：

[felix] 07-manage-assets $ npx webpack

07-manage-assets/dist/styles/4a9cff551c7a105e1554.css

/*!******************************************************************!*\
!*** css ../node_modules/css-loader/dist/cjs.js!./src/style.css ***!
******************************************************************/@font-face{font-family:iconfont;src:url(../images/65b194f1f711865371d1.ttf) format("truetype")}.hello{background-color:#f9efd4}.icon{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:iconfont!important;font-size:16px;font-style:normal}.block-bg{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 3046.7 875.7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m387 0 387 218.9v437.9L387 875.7 0 656.8V218.9z' fill='%23fff'/%3E%3Cpath d='M704.9 641.7 399.8 814.3V679.9l190.1-104.6zm20.9-18.9V261.9l-111.6 64.5v232zM67.9 641.7 373 814.3V679.9L182.8 575.3zM47 622.8V261.9l111.6 64.5v232zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9zm652.6 0-312.9-177v129.9l200.5 110.2 1.6.9z' fill='%238ed6fb'/%3E%3Cpath d='M373 649.3 185.4 546.1V341.8L373 450.1zm26.8 0 187.6-103.1V341.8L399.8 450.1zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7z' fill='%231c78c0'/%3E%3Cpath d='M1164.3 576.3h82.5l84.1-280.2h-80.4l-49.8 198.8-53.1-198.8H1078l-53.6 198.8-49.3-198.8h-80.4l83.6 280.2h82.5l52-179.5zM1335.2 437c0 84.1 57.3 146.3 147.4 146.3 69.7 0 107.2-41.8 117.9-61.6l-48.8-37c-8 11.8-30 34.3-68.1 34.3-41.3 0-71.3-26.8-72.9-64.3H1608c.5-5.4.5-10.7.5-16.1 0-91.6-49.3-149.5-136.1-149.5-79.9 0-137.2 63.2-137.2 147.9zm77.7-30.6c3.2-32.1 25.7-56.8 60.6-56.8 33.8 0 58.4 22.5 60 56.8zm223.5 169.9h69.7v-28.9c7.5 9.1 35.4 35.9 83.1 35.9 80.4 0 137.2-60.5 137.2-146.8 0-86.8-52.5-147.3-132.9-147.3-48.2 0-76.1 26.8-83.1 36.4V188.9h-73.9v387.4zm71.8-139.3c0-52.5 31.1-82.5 71.8-82.5 42.9 0 71.8 33.8 71.8 82.5 0 49.8-30 80.9-71.8 80.9-45 0-71.8-36.5-71.8-80.9zm247 239.5h73.9V547.3c7 9.1 34.8 35.9 83.1 35.9 80.4 0 132.9-60.5 132.9-147.3 0-85.7-56.8-146.8-137.2-146.8-47.7 0-75.6 26.8-83.1 36.4V296h-69.7v380.5zm71.8-241.1c0-44.5 26.8-80.9 71.8-80.9 41.8 0 71.8 31.1 71.8 80.9 0 48.8-28.9 82.5-71.8 82.5-40.7 0-71.8-30-71.8-82.5zm231.5 54.1c0 58.9 48.2 93.8 105 93.8 32.2 0 53.6-9.6 68.1-25.2l4.8 18.2h65.4V398.9c0-62.7-26.8-109.8-116.8-109.8-42.9 0-85.2 16.1-110.4 33.2l27.9 50.4a165.2 165.2 0 0 1 74.5-19.8c32.7 0 50.9 16.6 50.9 41.3v18.2c-10.2-7-32.2-15.5-60.6-15.5-65.4-.1-108.8 37.4-108.8 92.6zm73.9-2.2c0-23 19.8-39.1 48.2-39.1s48.8 14.5 48.8 39.1c0 23.6-20.4 38.6-48.2 38.6s-48.8-15.5-48.8-38.6zm348.9 30.6c-46.6 0-79.8-33.8-79.8-81.4 0-45 29.5-82 77.2-82a95.2 95.2 0 0 1 65.4 26.8l20.9-62.2a142.6 142.6 0 0 0-88.4-30c-85.2 0-149 62.7-149 147.9s62.2 146.3 149.5 146.3a141 141 0 0 0 87.3-30l-19.8-60.5c-12.4 10.1-34.9 25.1-63.3 25.1zm110.9 58.4h73.9V431.6l93.8 144.7h86.8L2940.6 423l98.6-127h-83.1l-90 117.9v-225h-73.9z' fill='%23f5fafa'/%3E%3C/svg%3E")}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzRhOWNmZjU1MWM3YTEwNWUxNTU0LmNzcyIsIm1hcHBpbmdzIjoiQUFBQTs7cUVBRXFFLENDRnJFLFdBQ0Usb0JBQXVCLENBQ3ZCLDhEQUNGLENBRUEsT0FDRSx3QkFDRixDQUVBLE1BSUUsa0NBQW1DLENBQ25DLGlDQUFrQyxDQUpsQyw4QkFBa0MsQ0FDbEMsY0FBZSxDQUNmLGlCQUdGLENBRUEsVUFDRSw0d0VBQ0YiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vNGE5Y2ZmNTUxYzdhMTA1ZTE1NTQuY3NzIiwid2VicGFjazovLy8uL3NyYy9zdHlsZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLyohKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqISpcXFxuICAhKioqIGNzcyAuLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL3NyYy9zdHlsZS5jc3MgKioqIVxuICBcXCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbkBmb250LWZhY2Uge1xuICBmb250LWZhbWlseTogJ2ljb25mb250JztcbiAgc3JjOiB1cmwoLi4vaW1hZ2VzLzY1YjE5NGYxZjcxMTg2NTM3MWQxLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGVsbG8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcImljb25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjc3ZnIHZpZXdCb3g9JzAgMCAzMDQ2LjcgODc1LjcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM2UlM2NwYXRoIGQ9J20zODcgMCAzODcgMjE4Ljl2NDM3LjlsLTM4NyAyMTguOS0zODctMjE4Ljl2LTQzNy45eicgZmlsbD0nd2hpdGUnLyUzZSUzY3BhdGggZD0nbTcwNC45IDY0MS43LTMwNS4xIDE3Mi42di0xMzQuNGwxOTAuMS0xMDQuNnptMjAuOS0xOC45di0zNjAuOWwtMTExLjYgNjQuNXYyMzJ6bS02NTcuOSAxOC45IDMwNS4xIDE3Mi42di0xMzQuNGwtMTkwLjItMTA0LjZ6bS0yMC45LTE4Ljl2LTM2MC45bDExMS42IDY0LjV2MjMyem0xMy4xLTM4NC4zIDMxMi45LTE3N3YxMjkuOWwtMjAwLjUgMTEwLjMtMS42Ljl6bTY1Mi42IDAtMzEyLjktMTc3djEyOS45bDIwMC41IDExMC4yIDEuNi45eicgZmlsbD0nJTIzOGVkNmZiJy8lM2UlM2NwYXRoIGQ9J20zNzMgNjQ5LjMtMTg3LjYtMTAzLjJ2LTIwNC4zbDE4Ny42IDEwOC4zem0yNi44IDAgMTg3LjYtMTAzLjF2LTIwNC40bC0xODcuNiAxMDguM3ptLTIwMS43LTMzMS4xIDE4OC4zLTEwMy41IDE4OC4zIDEwMy41LTE4OC4zIDEwOC43eicgZmlsbD0nJTIzMWM3OGMwJy8lM2UlM2NwYXRoIGQ9J20xMTY0LjMgNTc2LjNoODIuNWw4NC4xLTI4MC4yaC04MC40bC00OS44IDE5OC44LTUzLjEtMTk4LjhoLTY5LjZsLTUzLjYgMTk4LjgtNDkuMy0xOTguOGgtODAuNGw4My42IDI4MC4yaDgyLjVsNTItMTc5LjV6bTE3MC45LTEzOS4zYzAgODQuMSA1Ny4zIDE0Ni4zIDE0Ny40IDE0Ni4zIDY5LjcgMCAxMDcuMi00MS44IDExNy45LTYxLjZsLTQ4LjgtMzdjLTggMTEuOC0zMCAzNC4zLTY4LjEgMzQuMy00MS4zIDAtNzEuMy0yNi44LTcyLjktNjQuM2gxOTcuM2MuNS01LjQuNS0xMC43LjUtMTYuMSAwLTkxLjYtNDkuMy0xNDkuNS0xMzYuMS0xNDkuNS03OS45IDAtMTM3LjIgNjMuMi0xMzcuMiAxNDcuOXptNzcuNy0zMC42YzMuMi0zMi4xIDI1LjctNTYuOCA2MC42LTU2LjggMzMuOCAwIDU4LjQgMjIuNSA2MCA1Ni44em0yMjMuNSAxNjkuOWg2OS43di0yOC45YzcuNSA5LjEgMzUuNCAzNS45IDgzLjEgMzUuOSA4MC40IDAgMTM3LjItNjAuNSAxMzcuMi0xNDYuOCAwLTg2LjgtNTIuNS0xNDcuMy0xMzIuOS0xNDcuMy00OC4yIDAtNzYuMSAyNi44LTgzLjEgMzYuNHYtMTM2LjdoLTczLjl2Mzg3LjR6bTcxLjgtMTM5LjNjMC01Mi41IDMxLjEtODIuNSA3MS44LTgyLjUgNDIuOSAwIDcxLjggMzMuOCA3MS44IDgyLjUgMCA0OS44LTMwIDgwLjktNzEuOCA4MC45LTQ1IDAtNzEuOC0zNi41LTcxLjgtODAuOXptMjQ3IDIzOS41aDczLjl2LTEyOS4yYzcgOS4xIDM0LjggMzUuOSA4My4xIDM1LjkgODAuNCAwIDEzMi45LTYwLjUgMTMyLjktMTQ3LjMgMC04NS43LTU2LjgtMTQ2LjgtMTM3LjItMTQ2LjgtNDcuNyAwLTc1LjYgMjYuOC04My4xIDM2LjR2LTI5LjVoLTY5Ljd2MzgwLjV6bTcxLjgtMjQxLjFjMC00NC41IDI2LjgtODAuOSA3MS44LTgwLjkgNDEuOCAwIDcxLjggMzEuMSA3MS44IDgwLjkgMCA0OC44LTI4LjkgODIuNS03MS44IDgyLjUtNDAuNyAwLTcxLjgtMzAtNzEuOC04Mi41em0yMzEuNSA1NC4xYzAgNTguOSA0OC4yIDkzLjggMTA1IDkzLjggMzIuMiAwIDUzLjYtOS42IDY4LjEtMjUuMmw0LjggMTguMmg2NS40di0xNzcuNGMwLTYyLjctMjYuOC0xMDkuOC0xMTYuOC0xMDkuOC00Mi45IDAtODUuMiAxNi4xLTExMC40IDMzLjJsMjcuOSA1MC40YTE2NS4yIDE2NS4yIDAgMCAxIDc0LjUtMTkuOGMzMi43IDAgNTAuOSAxNi42IDUwLjkgNDEuM3YxOC4yYy0xMC4yLTctMzIuMi0xNS41LTYwLjYtMTUuNS02NS40LS4xLTEwOC44IDM3LjQtMTA4LjggOTIuNnptNzMuOS0yLjJjMC0yMyAxOS44LTM5LjEgNDguMi0zOS4xczQ4LjggMTQuNSA0OC44IDM5LjFjMCAyMy42LTIwLjQgMzguNi00OC4yIDM4LjZzLTQ4LjgtMTUuNS00OC44LTM4LjZ6bTM0OC45IDMwLjZjLTQ2LjYgMC03OS44LTMzLjgtNzkuOC04MS40IDAtNDUgMjkuNS04MiA3Ny4yLTgyYTk1LjIgOTUuMiAwIDAgMSA2NS40IDI2LjhsMjAuOS02Mi4yYTE0Mi42IDE0Mi42IDAgMCAwIC04OC40LTMwYy04NS4yIDAtMTQ5IDYyLjctMTQ5IDE0Ny45czYyLjIgMTQ2LjMgMTQ5LjUgMTQ2LjNhMTQxIDE0MSAwIDAgMCA4Ny4zLTMwbC0xOS44LTYwLjVjLTEyLjQgMTAuMS0zNC45IDI1LjEtNjMuMyAyNS4xem0xMTAuOSA1OC40aDczLjl2LTE0NC43bDkzLjggMTQ0LjdoODYuOGwtMTA2LjEtMTUzLjMgOTguNi0xMjdoLTgzLjFsLTkwIDExNy45di0yMjVoLTczLjl6JyBmaWxsPSclMjNmNWZhZmEnLyUzZSUzYy9zdmclM2VcIikgO1xufVxuIiwiQGZvbnQtZmFjZSB7XG4gIGZvbnQtZmFtaWx5OiAnaWNvbmZvbnQnO1xuICBzcmM6IHVybCgnLi9hc3NldHMvaWNvbmZvbnQudHRmJykgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGVsbG8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcImljb25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoLi9hc3NldHMvd2VicGFjay1sb2dvLnN2ZykgO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/

由于在前面我们应用了如下配置，使生产环境css 文件也进行了压缩处理。我们可以注释它：

optimization: {// minimize: true,
}

1.6.6 加载数据

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

[felix] webpack5 $ npm install --save-dev csv-loader xml-loader

添加配置：

module: {rules: [{test: /.(csv|tsv)$/i,use: ['csv-loader'],},{test: /.xml$/i,use: ['xml-loader'],},]
}

07-manage-assets/webpack.config.js

//...module.exports = {
//...// 配置资源文件
module: {rules: [//...{test: /.(csv|tsv)$/i,use: ['csv-loader'],},{test: /.xml$/i,use: ['xml-loader'],},],},//...
}

现在，你可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量，将包含可直接使用的已解析 JSON：

创建两个文件：

07-manage-assets/src/assets/data.xml

<?xml version="1.0" encoding="UTF-8"?>

<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>

07-manage-assets/src/assets/data.csv

to,from,heading,body
Mary,John,Reminder,Call Cindy on Tuesday
Zoe,Bill,Reminder,Buy orange juice
Autumn,Lindsey,Letter,I miss you

在入口文件里加载数据模块，并在控制台上打印导入内容：

import Data from './assets/data.xml'
import Notes from './assets/data.csv'console.log(Data)
console.log(Notes)

07-manage-assets/src/index.js

// 导入模块
//...import Data from './assets/data.xml'
import Notes from './assets/data.csv'//...console.log(Data)
console.log(Notes)

查看开发者工具中的控制台，你应该能够看到导入的数据会被打印出来！

[felix] 07-manage-assets $ npx webpack serve

由此可见，data.xml文件转化为一个JS对象，data.cvs转化为一个数组。

1.6.7 自定义 JSON 模块 parser

通过使用自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。

假设你在 src 文件夹下有一个 data.toml、一个 data.yaml 以及一个 data.json5 文件：

07-manage-assets/src/assets/json/data.toml

title = "TOML Example"[owner]
name = "Tom Preston-Werner"
organization = "GitHub"
bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
dob = 1979-05-27T07:32:00Z

07-manage-assets/src/assets/json/data.yaml

title: YAML Exampleowner:name: Tom Preston-Wernerorganization: GitHubbio: |-GitHub Cofounder & CEOLikes tater tots and beer.dob: 1979-05-27T07:32:00.000Z

07-manage-assets/src/assets/json/data.json5

{
// comment
title: 'JSON5 Example',
owner: {name: 'Tom Preston-Werner',organization: 'GitHub',bio: 'GitHub Cofounder & CEO\n\
Likes tater tots and beer.',dob: '1979-05-27T07:32:00.000Z',
},
}

首先安装 toml，yamljs 和 json5 的 packages：

[felix] webpack5 $ npm install toml yamljs json5 --save-dev

并在你的 webpack 中配置它们：

const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');module.exports = {module: {rules: [{test: /.toml$/i,type: 'json',parser: {parse: toml.parse,},},{test: /.yaml$/i,type: 'json',parser: {parse: yaml.parse,},},{test: /.json5$/i,type: 'json',parser: {parse: json5.parse,},},]}
}

07-manage-assets/webpack.config.js

//...const toml = require('toml')
const yaml = require('yamljs')
const json5 = require('json5')module.exports = {
//...// 配置资源文件module: {rules: [//...{test: /.toml$/i,type: 'json',parser: {parse: toml.parse,},},{test: /.yaml$/i,type: 'json',parser: {parse: yaml.parse,},},{test: /.json5$/i,type: 'json',parser: {parse: json5.parse,},},],},//...
}

在主文件中引入模块，并打印内容：

import toml from './data.toml';
import yaml from './data.yaml';
import json from './data.json5';console.log(toml.title); // output `TOML Example`
console.log(toml.owner.name); // output `Tom Preston-Werner`console.log(yaml.title); // output `YAML Example`
console.log(yaml.owner.name); // output `Tom Preston-Werner`console.log(json.title); // output `JSON5 Example`
console.log(json.owner.name); // output `Tom Preston-Werner`

07-manage-assets/src/index.js

// 导入模块
//...
import toml from './assets/json/data.toml'
import yaml from './assets/json/data.yaml'
import json from './assets/json/data.json5'//...console.log(toml.title); // output `TOML Example`
console.log(toml.owner.name); // output `Tom Preston-Werner`console.log(yaml.title); // output `YAML Example`
console.log(yaml.owner.name); // output `Tom Preston-Werner`console.log(json.title); // output `JSON5 Example`
console.log(json.owner.name); // output `Tom Preston-Werner`

启动服务，打开浏览器：

[felix] 07-manage-assets $ npx webpack serve

现在，toml、yaml和json5几个类型的文件都正常输出了结果。