前沿拓展：
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-**oothing: antialiased;
-moz-osx-font-**oothing: 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-**oothing: antialiased;
-moz-osx-font-**oothing: 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)
启动服务，打开浏览器：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
我们再打包一下，看看输出的文件：
[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-**oothing:antialiased;-moz-osx-font-**oothing: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzRhOWNmZjU1MWM3YTEwNWUxNTU0LmNzcyIsIm1hcHBpbmdzIjoiQUFBQTs7cUVBRXFFLENDRnJFLFdBQ0U**0**QXVCLENBQ3ZCLDhEQUNGLENBRUEsT0FDRSx3QkFDRixDQUVBLE1BSUUsa0NBQW1DLENBQ25DLGlDQUFrQyxDQUpsQyw4QkFBa0MsQ0FDbEMsY0FBZSxDQUNmLGlCQUdGLENBRUEsVUFDRSw0d0VBQ0YiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vNGE5Y2ZmNTUxYzdhMTA1ZTE1NTQuY3NzIiwid2VicGFjazovLy8uL3NyYy9zdHlsZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLyohKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqISpcXFxuICAhKioqIGNzcyAuLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL3NyYy9zdHlsZS5jc3MgKioqIVxuICBcXCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbkBmb250LWZhY2Uge1xuICBmb250LWZhbWlseTogJ2l**25mb250JztcbiAgc3JjOiB1cmwoLi4vaW1hZ2VzLzY1YjE5NGYxZjcxMTg2NTM3MWQxLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjc3ZnIHZpZXdCb3g9JzAgMCAzMDQ2LjcgODc1LjcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM2UlM2NwYXRoIGQ9J20zODcgMCAzODcgMjE4Ljl2NDM3LjlsLTM4NyAyMTguOS0zODctMjE4Ljl2LTQzNy45eicgZml**D0nd2hpdGUnLyUzZSUzY3BhdGggZD0nbTcwNC45IDY0MS43LTMwNS4xIDE3Mi42di0xMzQuNGwxOTAuMS0xMDQuNnptMjAuOS0xOC45di0zNjAuOWwtMTExLjYgNjQuNXYyMzJ6bS02NTcuOSAxOC45IDMwNS4xIDE3Mi42di0xMzQuNGwtMTkwLjItMTA0LjZ6bS0yMC45LTE4Ljl2LTM2MC45bDExMS42IDY0LjV2MjMyem0xMy4xLTM4NC4zIDMxMi45LTE3N3YxMjkuOWwtMjAwLjUgMTEwLjMtMS42Ljl6bTY1Mi42IDAtMzEyLjktMTc3djEyOS45bDIwMC41IDExMC4yIDEuNi45eicgZml**D0nJTIzOGVkNmZiJy8lM2UlM2NwYXRoIGQ9J20zNzMgNjQ5LjMtMTg3LjYtMTAzLjJ2LTIwNC4zbDE4Ny42IDEwOC4zem0yNi44IDAgMTg3LjYtMTAzLjF2LTIwNC40bC0xODcuNiAxMDguM3ptLTIwMS43LTMzMS4xIDE4OC4zLTEwMy41IDE4OC4zIDEwMy41LTE4OC4zIDEwOC43eicgZml**D0nJTIzMWM3OGMwJy8lM2UlM2NwYXRoIGQ9J20xMTY0LjMgNTc2LjNoODIuNWw4NC4xLTI4MC4yaC04MC40bC00OS44IDE5OC44LTUzLjEtMTk4LjhoLTY5LjZsLTUzLjYgMTk4LjgtNDkuMy0xOTguOGgtODAuNGw4My42IDI4MC4yaDgyLjVsNTItMTc5LjV6bTE3MC45LTEzOS4zYzAgODQuMSA1Ny4zIDE0Ni4zIDE0Ny40IDE0Ni4zIDY5LjcgMCAxMDcuMi00MS44IDExNy45LTYxLjZsLTQ4LjgtMzdjLTggMTEuOC0zMCAzNC4zLTY4LjEgMzQuMy00MS4zIDAtNzEuMy0yNi44LTcyLjktNjQuM2gxOTcuM2MuNS01LjQuNS0xMC43LjUtMTYuMSAwLTkxLjYtNDkuMy0xNDkuNS0xMzYuMS0xNDkuNS03OS45IDAtMTM3LjIgNjMuMi0xMzcuMiAxNDcuOXptNzcuNy0zMC42YzMuMi0zMi4xIDI1LjctNTYuOCA2MC42LTU2LjggMzMuOCAwIDU4LjQgMjIuNSA2MCA1Ni44em0yMjMuNSAxNjkuOWg2OS43di0yOC45YzcuNSA5LjEgMzUuNCAzNS45IDgzLjEgMzUuOSA4MC40IDAgMTM3LjItNjAuNSAxMzcuMi0xNDYuOCAwLTg2LjgtNTIuNS0xNDcuMy0xMzIuOS0xNDcuMy00OC4yIDAtNzYuMSAyNi44LTgzLjEgMzYuNHYtMTM2LjdoLTczLjl2Mzg3LjR6bTcxLjgtMTM5LjNjMC01Mi41IDMxLjEtODIuNSA3MS44LTgyLjUgNDIuOSAwIDcxLjggMzMuOCA3MS44IDgyLjUgMCA0OS44LTMwIDgwLjktNzEuOCA4MC45LTQ1IDAtNzEuOC0zNi41LTcxLjgtODAuOXptMjQ3IDIzOS41aDczLjl2LTEyOS4yYzcgOS4xIDM0LjggMzUuOSA4My4xIDM1LjkgODAuNCAwIDEzMi45LTYwLjUgMTMyLjktMTQ3LjMgMC04NS43LTU2LjgtMTQ2LjgtMTM3LjItMTQ2LjgtNDcuNyAwLTc1LjYgMjYuOC04My4xIDM2LjR2LTI5LjVoLTY5Ljd2MzgwLjV6bTcxLjgtMjQxLjFjMC00NC41IDI2LjgtODAuOSA3MS44LTgwLjkgNDEuOCAwIDcxLjggMzEuMSA3MS44IDgwLjkgMCA0OC44LTI4LjkgODIuNS03MS44IDgyLjUtNDAuNyAwLTcxLjgtMzAtNzEuOC04Mi41em0yMzEuNSA1NC4xYzAgNTguOSA0OC4yIDkzLjggMTA1IDkzLjggMzIuMiAwIDUzLjYtOS42IDY4LjEtMjUuMmw0LjggMTguMmg2NS40di0xNzcuNGMwLTYyLjctMjYuOC0xMDkuOC0xMTYuOC0xMDkuOC00Mi45IDAtODUuMiAxNi4xLTExMC40IDMzLjJ**jcuOSA1MC40YTE2NS4yIDE2NS4yIDAgMCAxIDc0LjUtMTkuOGMzMi43IDAgNTAuOSAxNi42IDUwLjkgNDEuM3YxOC4yYy0xMC4yLTctMzIuMi0xNS41LTYwLjYtMTUuNS02NS40LS4xLTEwOC44IDM3LjQtMTA4LjggOTIuNnptNzMuOS0yLjJjMC0yMyAxOS44LTM5LjEgNDguMi0zOS4xczQ4LjggMTQuNSA0OC44IDM5LjFjMCAyMy42LTIwLjQgMzguNi00OC4yIDM4LjZzLTQ4LjgtMTUuNS00OC44LTM4LjZ6bTM0OC45IDMwLjZjLTQ2LjYgMC03OS44LTMzLjgtNzkuOC04MS40IDAtNDUgMjkuNS04MiA3Ny4yLTgyYTk1LjIgOTUuMiAwIDAgMSA2NS40IDI2Ljh**jAuOS02Mi4yYTE0Mi42IDE0Mi42IDAgMCAwIC04OC40LTMwYy04NS4yIDAtMTQ5IDYyLjctMTQ5IDE0Ny45czYyLjIgMTQ2LjMgMTQ5LjUgMTQ2LjNhMTQxIDE0MSAwIDAgMCA4Ny4zLTMwbC0xOS44LTYwLjVjLTEyLjQgMTAuMS0zNC45IDI1LjEtNjMuMyAyNS4xem0xMTAuOSA1OC40aDczLjl2LTE0NC43bDkzLjggMTQ0LjdoODYuOGwtMTA2LjEtMTUzLjMgOTguNi0xMjdoLTgzLjFsLTkwIDExNy45di0yMjVoLTczLjl6JyBmaWxsPSclMjNmNWZhZmEnLyUzZSUzYy9zdmclM2VcIikgO1xufVxuIiwiQGZvbnQtZmFjZ**7XG4gIGZvbnQtZmFtaWx5OiAnaWNvbmZvbnQnO1xuICBzcmM6IHVybCgnLi9hc3NldHMvaWNvbmZvbnQudHRmJykgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoLi9hc3NldHMvd2VicGFjay1**2**LnN2ZykgO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/
由于在前面我们应用了如下配置，使生产环境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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
由此可见，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 & CEOnLikes 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 & CEOn
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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
现在，toml、yaml和json5几个类型的文件都正常输出了结果。
拓展知识：
wx5c
WX5C
1400万
24的广角
全景
3D全景
虚化模式
新加入的美肤功能
这款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄机身，快门速度快，没其他功能
wx5c
WX5C，背照式CMOS感光元件是最大优势，ISO800照片仍可用，130在ISO800下已比较模糊了，第三就是大光圈，适合拍人像
而且3D拍摄也非常吸引人
wx5c
本人
推荐
佳能130
佳能
是专业的
索尼
大多数只是外观好看
性价比
不如
佳能好
wx5c
当然是佳能IXUS130I好，索尼的产品只是注重外观，性能与佳能还是有一定差距。
wx5c
佳能比索尼好
索尼的外观设计好，但拍照性能未必能胜过佳能
要外观好看，就选索尼，要拍出来的照片好看，就选佳能
前沿拓展：
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-**oothing: antialiased;
-moz-osx-font-**oothing: 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-**oothing: antialiased;
-moz-osx-font-**oothing: 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)
启动服务，打开浏览器：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
我们再打包一下，看看输出的文件：
[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-**oothing:antialiased;-moz-osx-font-**oothing: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzRhOWNmZjU1MWM3YTEwNWUxNTU0LmNzcyIsIm1hcHBpbmdzIjoiQUFBQTs7cUVBRXFFLENDRnJFLFdBQ0U**0**QXVCLENBQ3ZCLDhEQUNGLENBRUEsT0FDRSx3QkFDRixDQUVBLE1BSUUsa0NBQW1DLENBQ25DLGlDQUFrQyxDQUpsQyw4QkFBa0MsQ0FDbEMsY0FBZSxDQUNmLGlCQUdGLENBRUEsVUFDRSw0d0VBQ0YiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vNGE5Y2ZmNTUxYzdhMTA1ZTE1NTQuY3NzIiwid2VicGFjazovLy8uL3NyYy9zdHlsZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLyohKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqISpcXFxuICAhKioqIGNzcyAuLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL3NyYy9zdHlsZS5jc3MgKioqIVxuICBcXCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbkBmb250LWZhY2Uge1xuICBmb250LWZhbWlseTogJ2l**25mb250JztcbiAgc3JjOiB1cmwoLi4vaW1hZ2VzLzY1YjE5NGYxZjcxMTg2NTM3MWQxLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjc3ZnIHZpZXdCb3g9JzAgMCAzMDQ2LjcgODc1LjcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM2UlM2NwYXRoIGQ9J20zODcgMCAzODcgMjE4Ljl2NDM3LjlsLTM4NyAyMTguOS0zODctMjE4Ljl2LTQzNy45eicgZml**D0nd2hpdGUnLyUzZSUzY3BhdGggZD0nbTcwNC45IDY0MS43LTMwNS4xIDE3Mi42di0xMzQuNGwxOTAuMS0xMDQuNnptMjAuOS0xOC45di0zNjAuOWwtMTExLjYgNjQuNXYyMzJ6bS02NTcuOSAxOC45IDMwNS4xIDE3Mi42di0xMzQuNGwtMTkwLjItMTA0LjZ6bS0yMC45LTE4Ljl2LTM2MC45bDExMS42IDY0LjV2MjMyem0xMy4xLTM4NC4zIDMxMi45LTE3N3YxMjkuOWwtMjAwLjUgMTEwLjMtMS42Ljl6bTY1Mi42IDAtMzEyLjktMTc3djEyOS45bDIwMC41IDExMC4yIDEuNi45eicgZml**D0nJTIzOGVkNmZiJy8lM2UlM2NwYXRoIGQ9J20zNzMgNjQ5LjMtMTg3LjYtMTAzLjJ2LTIwNC4zbDE4Ny42IDEwOC4zem0yNi44IDAgMTg3LjYtMTAzLjF2LTIwNC40bC0xODcuNiAxMDguM3ptLTIwMS43LTMzMS4xIDE4OC4zLTEwMy41IDE4OC4zIDEwMy41LTE4OC4zIDEwOC43eicgZml**D0nJTIzMWM3OGMwJy8lM2UlM2NwYXRoIGQ9J20xMTY0LjMgNTc2LjNoODIuNWw4NC4xLTI4MC4yaC04MC40bC00OS44IDE5OC44LTUzLjEtMTk4LjhoLTY5LjZsLTUzLjYgMTk4LjgtNDkuMy0xOTguOGgtODAuNGw4My42IDI4MC4yaDgyLjVsNTItMTc5LjV6bTE3MC45LTEzOS4zYzAgODQuMSA1Ny4zIDE0Ni4zIDE0Ny40IDE0Ni4zIDY5LjcgMCAxMDcuMi00MS44IDExNy45LTYxLjZsLTQ4LjgtMzdjLTggMTEuOC0zMCAzNC4zLTY4LjEgMzQuMy00MS4zIDAtNzEuMy0yNi44LTcyLjktNjQuM2gxOTcuM2MuNS01LjQuNS0xMC43LjUtMTYuMSAwLTkxLjYtNDkuMy0xNDkuNS0xMzYuMS0xNDkuNS03OS45IDAtMTM3LjIgNjMuMi0xMzcuMiAxNDcuOXptNzcuNy0zMC42YzMuMi0zMi4xIDI1LjctNTYuOCA2MC42LTU2LjggMzMuOCAwIDU4LjQgMjIuNSA2MCA1Ni44em0yMjMuNSAxNjkuOWg2OS43di0yOC45YzcuNSA5LjEgMzUuNCAzNS45IDgzLjEgMzUuOSA4MC40IDAgMTM3LjItNjAuNSAxMzcuMi0xNDYuOCAwLTg2LjgtNTIuNS0xNDcuMy0xMzIuOS0xNDcuMy00OC4yIDAtNzYuMSAyNi44LTgzLjEgMzYuNHYtMTM2LjdoLTczLjl2Mzg3LjR6bTcxLjgtMTM5LjNjMC01Mi41IDMxLjEtODIuNSA3MS44LTgyLjUgNDIuOSAwIDcxLjggMzMuOCA3MS44IDgyLjUgMCA0OS44LTMwIDgwLjktNzEuOCA4MC45LTQ1IDAtNzEuOC0zNi41LTcxLjgtODAuOXptMjQ3IDIzOS41aDczLjl2LTEyOS4yYzcgOS4xIDM0LjggMzUuOSA4My4xIDM1LjkgODAuNCAwIDEzMi45LTYwLjUgMTMyLjktMTQ3LjMgMC04NS43LTU2LjgtMTQ2LjgtMTM3LjItMTQ2LjgtNDcuNyAwLTc1LjYgMjYuOC04My4xIDM2LjR2LTI5LjVoLTY5Ljd2MzgwLjV6bTcxLjgtMjQxLjFjMC00NC41IDI2LjgtODAuOSA3MS44LTgwLjkgNDEuOCAwIDcxLjggMzEuMSA3MS44IDgwLjkgMCA0OC44LTI4LjkgODIuNS03MS44IDgyLjUtNDAuNyAwLTcxLjgtMzAtNzEuOC04Mi41em0yMzEuNSA1NC4xYzAgNTguOSA0OC4yIDkzLjggMTA1IDkzLjggMzIuMiAwIDUzLjYtOS42IDY4LjEtMjUuMmw0LjggMTguMmg2NS40di0xNzcuNGMwLTYyLjctMjYuOC0xMDkuOC0xMTYuOC0xMDkuOC00Mi45IDAtODUuMiAxNi4xLTExMC40IDMzLjJ**jcuOSA1MC40YTE2NS4yIDE2NS4yIDAgMCAxIDc0LjUtMTkuOGMzMi43IDAgNTAuOSAxNi42IDUwLjkgNDEuM3YxOC4yYy0xMC4yLTctMzIuMi0xNS41LTYwLjYtMTUuNS02NS40LS4xLTEwOC44IDM3LjQtMTA4LjggOTIuNnptNzMuOS0yLjJjMC0yMyAxOS44LTM5LjEgNDguMi0zOS4xczQ4LjggMTQuNSA0OC44IDM5LjFjMCAyMy42LTIwLjQgMzguNi00OC4yIDM4LjZzLTQ4LjgtMTUuNS00OC44LTM4LjZ6bTM0OC45IDMwLjZjLTQ2LjYgMC03OS44LTMzLjgtNzkuOC04MS40IDAtNDUgMjkuNS04MiA3Ny4yLTgyYTk1LjIgOTUuMiAwIDAgMSA2NS40IDI2Ljh**jAuOS02Mi4yYTE0Mi42IDE0Mi42IDAgMCAwIC04OC40LTMwYy04NS4yIDAtMTQ5IDYyLjctMTQ5IDE0Ny45czYyLjIgMTQ2LjMgMTQ5LjUgMTQ2LjNhMTQxIDE0MSAwIDAgMCA4Ny4zLTMwbC0xOS44LTYwLjVjLTEyLjQgMTAuMS0zNC45IDI1LjEtNjMuMyAyNS4xem0xMTAuOSA1OC40aDczLjl2LTE0NC43bDkzLjggMTQ0LjdoODYuOGwtMTA2LjEtMTUzLjMgOTguNi0xMjdoLTgzLjFsLTkwIDExNy45di0yMjVoLTczLjl6JyBmaWxsPSclMjNmNWZhZmEnLyUzZSUzYy9zdmclM2VcIikgO1xufVxuIiwiQGZvbnQtZmFjZ**7XG4gIGZvbnQtZmFtaWx5OiAnaWNvbmZvbnQnO1xuICBzcmM6IHVybCgnLi9hc3NldHMvaWNvbmZvbnQudHRmJykgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoLi9hc3NldHMvd2VicGFjay1**2**LnN2ZykgO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/
由于在前面我们应用了如下配置，使生产环境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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
由此可见，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 & CEOnLikes 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 & CEOn
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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
现在，toml、yaml和json5几个类型的文件都正常输出了结果。
拓展知识：
wx5c
WX5C
1400万
24的广角
全景
3D全景
虚化模式
新加入的美肤功能
这款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄机身，快门速度快，没其他功能
wx5c
WX5C，背照式CMOS感光元件是最大优势，ISO800照片仍可用，130在ISO800下已比较模糊了，第三就是大光圈，适合拍人像
而且3D拍摄也非常吸引人
wx5c
本人
推荐
佳能130
佳能
是专业的
索尼
大多数只是外观好看
性价比
不如
佳能好
wx5c
当然是佳能IXUS130I好，索尼的产品只是注重外观，性能与佳能还是有一定差距。
wx5c
佳能比索尼好
索尼的外观设计好，但拍照性能未必能胜过佳能
要外观好看，就选索尼，要拍出来的照片好看，就选佳能
前沿拓展：
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-**oothing: antialiased;
-moz-osx-font-**oothing: 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-**oothing: antialiased;
-moz-osx-font-**oothing: 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)
启动服务，打开浏览器：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
我们再打包一下，看看输出的文件：
[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-**oothing:antialiased;-moz-osx-font-**oothing: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzRhOWNmZjU1MWM3YTEwNWUxNTU0LmNzcyIsIm1hcHBpbmdzIjoiQUFBQTs7cUVBRXFFLENDRnJFLFdBQ0U**0**QXVCLENBQ3ZCLDhEQUNGLENBRUEsT0FDRSx3QkFDRixDQUVBLE1BSUUsa0NBQW1DLENBQ25DLGlDQUFrQyxDQUpsQyw4QkFBa0MsQ0FDbEMsY0FBZSxDQUNmLGlCQUdGLENBRUEsVUFDRSw0d0VBQ0YiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vNGE5Y2ZmNTUxYzdhMTA1ZTE1NTQuY3NzIiwid2VicGFjazovLy8uL3NyYy9zdHlsZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLyohKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqISpcXFxuICAhKioqIGNzcyAuLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL3NyYy9zdHlsZS5jc3MgKioqIVxuICBcXCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbkBmb250LWZhY2Uge1xuICBmb250LWZhbWlseTogJ2l**25mb250JztcbiAgc3JjOiB1cmwoLi4vaW1hZ2VzLzY1YjE5NGYxZjcxMTg2NTM3MWQxLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjc3ZnIHZpZXdCb3g9JzAgMCAzMDQ2LjcgODc1LjcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM2UlM2NwYXRoIGQ9J20zODcgMCAzODcgMjE4Ljl2NDM3LjlsLTM4NyAyMTguOS0zODctMjE4Ljl2LTQzNy45eicgZml**D0nd2hpdGUnLyUzZSUzY3BhdGggZD0nbTcwNC45IDY0MS43LTMwNS4xIDE3Mi42di0xMzQuNGwxOTAuMS0xMDQuNnptMjAuOS0xOC45di0zNjAuOWwtMTExLjYgNjQuNXYyMzJ6bS02NTcuOSAxOC45IDMwNS4xIDE3Mi42di0xMzQuNGwtMTkwLjItMTA0LjZ6bS0yMC45LTE4Ljl2LTM2MC45bDExMS42IDY0LjV2MjMyem0xMy4xLTM4NC4zIDMxMi45LTE3N3YxMjkuOWwtMjAwLjUgMTEwLjMtMS42Ljl6bTY1Mi42IDAtMzEyLjktMTc3djEyOS45bDIwMC41IDExMC4yIDEuNi45eicgZml**D0nJTIzOGVkNmZiJy8lM2UlM2NwYXRoIGQ9J20zNzMgNjQ5LjMtMTg3LjYtMTAzLjJ2LTIwNC4zbDE4Ny42IDEwOC4zem0yNi44IDAgMTg3LjYtMTAzLjF2LTIwNC40bC0xODcuNiAxMDguM3ptLTIwMS43LTMzMS4xIDE4OC4zLTEwMy41IDE4OC4zIDEwMy41LTE4OC4zIDEwOC43eicgZml**D0nJTIzMWM3OGMwJy8lM2UlM2NwYXRoIGQ9J20xMTY0LjMgNTc2LjNoODIuNWw4NC4xLTI4MC4yaC04MC40bC00OS44IDE5OC44LTUzLjEtMTk4LjhoLTY5LjZsLTUzLjYgMTk4LjgtNDkuMy0xOTguOGgtODAuNGw4My42IDI4MC4yaDgyLjVsNTItMTc5LjV6bTE3MC45LTEzOS4zYzAgODQuMSA1Ny4zIDE0Ni4zIDE0Ny40IDE0Ni4zIDY5LjcgMCAxMDcuMi00MS44IDExNy45LTYxLjZsLTQ4LjgtMzdjLTggMTEuOC0zMCAzNC4zLTY4LjEgMzQuMy00MS4zIDAtNzEuMy0yNi44LTcyLjktNjQuM2gxOTcuM2MuNS01LjQuNS0xMC43LjUtMTYuMSAwLTkxLjYtNDkuMy0xNDkuNS0xMzYuMS0xNDkuNS03OS45IDAtMTM3LjIgNjMuMi0xMzcuMiAxNDcuOXptNzcuNy0zMC42YzMuMi0zMi4xIDI1LjctNTYuOCA2MC42LTU2LjggMzMuOCAwIDU4LjQgMjIuNSA2MCA1Ni44em0yMjMuNSAxNjkuOWg2OS43di0yOC45YzcuNSA5LjEgMzUuNCAzNS45IDgzLjEgMzUuOSA4MC40IDAgMTM3LjItNjAuNSAxMzcuMi0xNDYuOCAwLTg2LjgtNTIuNS0xNDcuMy0xMzIuOS0xNDcuMy00OC4yIDAtNzYuMSAyNi44LTgzLjEgMzYuNHYtMTM2LjdoLTczLjl2Mzg3LjR6bTcxLjgtMTM5LjNjMC01Mi41IDMxLjEtODIuNSA3MS44LTgyLjUgNDIuOSAwIDcxLjggMzMuOCA3MS44IDgyLjUgMCA0OS44LTMwIDgwLjktNzEuOCA4MC45LTQ1IDAtNzEuOC0zNi41LTcxLjgtODAuOXptMjQ3IDIzOS41aDczLjl2LTEyOS4yYzcgOS4xIDM0LjggMzUuOSA4My4xIDM1LjkgODAuNCAwIDEzMi45LTYwLjUgMTMyLjktMTQ3LjMgMC04NS43LTU2LjgtMTQ2LjgtMTM3LjItMTQ2LjgtNDcuNyAwLTc1LjYgMjYuOC04My4xIDM2LjR2LTI5LjVoLTY5Ljd2MzgwLjV6bTcxLjgtMjQxLjFjMC00NC41IDI2LjgtODAuOSA3MS44LTgwLjkgNDEuOCAwIDcxLjggMzEuMSA3MS44IDgwLjkgMCA0OC44LTI4LjkgODIuNS03MS44IDgyLjUtNDAuNyAwLTcxLjgtMzAtNzEuOC04Mi41em0yMzEuNSA1NC4xYzAgNTguOSA0OC4yIDkzLjggMTA1IDkzLjggMzIuMiAwIDUzLjYtOS42IDY4LjEtMjUuMmw0LjggMTguMmg2NS40di0xNzcuNGMwLTYyLjctMjYuOC0xMDkuOC0xMTYuOC0xMDkuOC00Mi45IDAtODUuMiAxNi4xLTExMC40IDMzLjJ**jcuOSA1MC40YTE2NS4yIDE2NS4yIDAgMCAxIDc0LjUtMTkuOGMzMi43IDAgNTAuOSAxNi42IDUwLjkgNDEuM3YxOC4yYy0xMC4yLTctMzIuMi0xNS41LTYwLjYtMTUuNS02NS40LS4xLTEwOC44IDM3LjQtMTA4LjggOTIuNnptNzMuOS0yLjJjMC0yMyAxOS44LTM5LjEgNDguMi0zOS4xczQ4LjggMTQuNSA0OC44IDM5LjFjMCAyMy42LTIwLjQgMzguNi00OC4yIDM4LjZzLTQ4LjgtMTUuNS00OC44LTM4LjZ6bTM0OC45IDMwLjZjLTQ2LjYgMC03OS44LTMzLjgtNzkuOC04MS40IDAtNDUgMjkuNS04MiA3Ny4yLTgyYTk1LjIgOTUuMiAwIDAgMSA2NS40IDI2Ljh**jAuOS02Mi4yYTE0Mi42IDE0Mi42IDAgMCAwIC04OC40LTMwYy04NS4yIDAtMTQ5IDYyLjctMTQ5IDE0Ny45czYyLjIgMTQ2LjMgMTQ5LjUgMTQ2LjNhMTQxIDE0MSAwIDAgMCA4Ny4zLTMwbC0xOS44LTYwLjVjLTEyLjQgMTAuMS0zNC45IDI1LjEtNjMuMyAyNS4xem0xMTAuOSA1OC40aDczLjl2LTE0NC43bDkzLjggMTQ0LjdoODYuOGwtMTA2LjEtMTUzLjMgOTguNi0xMjdoLTgzLjFsLTkwIDExNy45di0yMjVoLTczLjl6JyBmaWxsPSclMjNmNWZhZmEnLyUzZSUzYy9zdmclM2VcIikgO1xufVxuIiwiQGZvbnQtZmFjZ**7XG4gIGZvbnQtZmFtaWx5OiAnaWNvbmZvbnQnO1xuICBzcmM6IHVybCgnLi9hc3NldHMvaWNvbmZvbnQudHRmJykgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoLi9hc3NldHMvd2VicGFjay1**2**LnN2ZykgO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/
由于在前面我们应用了如下配置，使生产环境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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
由此可见，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 & CEOnLikes 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 & CEOn
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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
现在，toml、yaml和json5几个类型的文件都正常输出了结果。
拓展知识：
wx5c
WX5C
1400万
24的广角
全景
3D全景
虚化模式
新加入的美肤功能
这款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄机身，快门速度快，没其他功能
wx5c
WX5C，背照式CMOS感光元件是最大优势，ISO800照片仍可用，130在ISO800下已比较模糊了，第三就是大光圈，适合拍人像
而且3D拍摄也非常吸引人
wx5c
本人
推荐
佳能130
佳能
是专业的
索尼
大多数只是外观好看
性价比
不如
佳能好
wx5c
当然是佳能IXUS130I好，索尼的产品只是注重外观，性能与佳能还是有一定差距。
wx5c
佳能比索尼好
索尼的外观设计好，但拍照性能未必能胜过佳能
要外观好看，就选索尼，要拍出来的照片好看，就选佳能
前沿拓展：
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-**oothing: antialiased;
-moz-osx-font-**oothing: 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-**oothing: antialiased;
-moz-osx-font-**oothing: 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)
启动服务，打开浏览器：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
我们再打包一下，看看输出的文件：
[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-**oothing:antialiased;-moz-osx-font-**oothing: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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzRhOWNmZjU1MWM3YTEwNWUxNTU0LmNzcyIsIm1hcHBpbmdzIjoiQUFBQTs7cUVBRXFFLENDRnJFLFdBQ0U**0**QXVCLENBQ3ZCLDhEQUNGLENBRUEsT0FDRSx3QkFDRixDQUVBLE1BSUUsa0NBQW1DLENBQ25DLGlDQUFrQyxDQUpsQyw4QkFBa0MsQ0FDbEMsY0FBZSxDQUNmLGlCQUdGLENBRUEsVUFDRSw0d0VBQ0YiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vNGE5Y2ZmNTUxYzdhMTA1ZTE1NTQuY3NzIiwid2VicGFjazovLy8uL3NyYy9zdHlsZS5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLyohKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqISpcXFxuICAhKioqIGNzcyAuLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9kaXN0L2Nqcy5qcyEuL3NyYy9zdHlsZS5jc3MgKioqIVxuICBcXCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKi9cbkBmb250LWZhY2Uge1xuICBmb250LWZhbWlseTogJ2l**25mb250JztcbiAgc3JjOiB1cmwoLi4vaW1hZ2VzLzY1YjE5NGYxZjcxMTg2NTM3MWQxLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjc3ZnIHZpZXdCb3g9JzAgMCAzMDQ2LjcgODc1LjcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM2UlM2NwYXRoIGQ9J20zODcgMCAzODcgMjE4Ljl2NDM3LjlsLTM4NyAyMTguOS0zODctMjE4Ljl2LTQzNy45eicgZml**D0nd2hpdGUnLyUzZSUzY3BhdGggZD0nbTcwNC45IDY0MS43LTMwNS4xIDE3Mi42di0xMzQuNGwxOTAuMS0xMDQuNnptMjAuOS0xOC45di0zNjAuOWwtMTExLjYgNjQuNXYyMzJ6bS02NTcuOSAxOC45IDMwNS4xIDE3Mi42di0xMzQuNGwtMTkwLjItMTA0LjZ6bS0yMC45LTE4Ljl2LTM2MC45bDExMS42IDY0LjV2MjMyem0xMy4xLTM4NC4zIDMxMi45LTE3N3YxMjkuOWwtMjAwLjUgMTEwLjMtMS42Ljl6bTY1Mi42IDAtMzEyLjktMTc3djEyOS45bDIwMC41IDExMC4yIDEuNi45eicgZml**D0nJTIzOGVkNmZiJy8lM2UlM2NwYXRoIGQ9J20zNzMgNjQ5LjMtMTg3LjYtMTAzLjJ2LTIwNC4zbDE4Ny42IDEwOC4zem0yNi44IDAgMTg3LjYtMTAzLjF2LTIwNC40bC0xODcuNiAxMDguM3ptLTIwMS43LTMzMS4xIDE4OC4zLTEwMy41IDE4OC4zIDEwMy41LTE4OC4zIDEwOC43eicgZml**D0nJTIzMWM3OGMwJy8lM2UlM2NwYXRoIGQ9J20xMTY0LjMgNTc2LjNoODIuNWw4NC4xLTI4MC4yaC04MC40bC00OS44IDE5OC44LTUzLjEtMTk4LjhoLTY5LjZsLTUzLjYgMTk4LjgtNDkuMy0xOTguOGgtODAuNGw4My42IDI4MC4yaDgyLjVsNTItMTc5LjV6bTE3MC45LTEzOS4zYzAgODQuMSA1Ny4zIDE0Ni4zIDE0Ny40IDE0Ni4zIDY5LjcgMCAxMDcuMi00MS44IDExNy45LTYxLjZsLTQ4LjgtMzdjLTggMTEuOC0zMCAzNC4zLTY4LjEgMzQuMy00MS4zIDAtNzEuMy0yNi44LTcyLjktNjQuM2gxOTcuM2MuNS01LjQuNS0xMC43LjUtMTYuMSAwLTkxLjYtNDkuMy0xNDkuNS0xMzYuMS0xNDkuNS03OS45IDAtMTM3LjIgNjMuMi0xMzcuMiAxNDcuOXptNzcuNy0zMC42YzMuMi0zMi4xIDI1LjctNTYuOCA2MC42LTU2LjggMzMuOCAwIDU4LjQgMjIuNSA2MCA1Ni44em0yMjMuNSAxNjkuOWg2OS43di0yOC45YzcuNSA5LjEgMzUuNCAzNS45IDgzLjEgMzUuOSA4MC40IDAgMTM3LjItNjAuNSAxMzcuMi0xNDYuOCAwLTg2LjgtNTIuNS0xNDcuMy0xMzIuOS0xNDcuMy00OC4yIDAtNzYuMSAyNi44LTgzLjEgMzYuNHYtMTM2LjdoLTczLjl2Mzg3LjR6bTcxLjgtMTM5LjNjMC01Mi41IDMxLjEtODIuNSA3MS44LTgyLjUgNDIuOSAwIDcxLjggMzMuOCA3MS44IDgyLjUgMCA0OS44LTMwIDgwLjktNzEuOCA4MC45LTQ1IDAtNzEuOC0zNi41LTcxLjgtODAuOXptMjQ3IDIzOS41aDczLjl2LTEyOS4yYzcgOS4xIDM0LjggMzUuOSA4My4xIDM1LjkgODAuNCAwIDEzMi45LTYwLjUgMTMyLjktMTQ3LjMgMC04NS43LTU2LjgtMTQ2LjgtMTM3LjItMTQ2LjgtNDcuNyAwLTc1LjYgMjYuOC04My4xIDM2LjR2LTI5LjVoLTY5Ljd2MzgwLjV6bTcxLjgtMjQxLjFjMC00NC41IDI2LjgtODAuOSA3MS44LTgwLjkgNDEuOCAwIDcxLjggMzEuMSA3MS44IDgwLjkgMCA0OC44LTI4LjkgODIuNS03MS44IDgyLjUtNDAuNyAwLTcxLjgtMzAtNzEuOC04Mi41em0yMzEuNSA1NC4xYzAgNTguOSA0OC4yIDkzLjggMTA1IDkzLjggMzIuMiAwIDUzLjYtOS42IDY4LjEtMjUuMmw0LjggMTguMmg2NS40di0xNzcuNGMwLTYyLjctMjYuOC0xMDkuOC0xMTYuOC0xMDkuOC00Mi45IDAtODUuMiAxNi4xLTExMC40IDMzLjJ**jcuOSA1MC40YTE2NS4yIDE2NS4yIDAgMCAxIDc0LjUtMTkuOGMzMi43IDAgNTAuOSAxNi42IDUwLjkgNDEuM3YxOC4yYy0xMC4yLTctMzIuMi0xNS41LTYwLjYtMTUuNS02NS40LS4xLTEwOC44IDM3LjQtMTA4LjggOTIuNnptNzMuOS0yLjJjMC0yMyAxOS44LTM5LjEgNDguMi0zOS4xczQ4LjggMTQuNSA0OC44IDM5LjFjMCAyMy42LTIwLjQgMzguNi00OC4yIDM4LjZzLTQ4LjgtMTUuNS00OC44LTM4LjZ6bTM0OC45IDMwLjZjLTQ2LjYgMC03OS44LTMzLjgtNzkuOC04MS40IDAtNDUgMjkuNS04MiA3Ny4yLTgyYTk1LjIgOTUuMiAwIDAgMSA2NS40IDI2Ljh**jAuOS02Mi4yYTE0Mi42IDE0Mi42IDAgMCAwIC04OC40LTMwYy04NS4yIDAtMTQ5IDYyLjctMTQ5IDE0Ny45czYyLjIgMTQ2LjMgMTQ5LjUgMTQ2LjNhMTQxIDE0MSAwIDAgMCA4Ny4zLTMwbC0xOS44LTYwLjVjLTEyLjQgMTAuMS0zNC45IDI1LjEtNjMuMyAyNS4xem0xMTAuOSA1OC40aDczLjl2LTE0NC43bDkzLjggMTQ0LjdoODYuOGwtMTA2LjEtMTUzLjMgOTguNi0xMjdoLTgzLjFsLTkwIDExNy45di0yMjVoLTczLjl6JyBmaWxsPSclMjNmNWZhZmEnLyUzZSUzYy9zdmclM2VcIikgO1xufVxuIiwiQGZvbnQtZmFjZ**7XG4gIGZvbnQtZmFtaWx5OiAnaWNvbmZvbnQnO1xuICBzcmM6IHVybCgnLi9hc3NldHMvaWNvbmZvbnQudHRmJykgZm9ybWF0KCd0cnVldHlwZScpO1xufVxuXG4uaGV**G8ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjllZmQ0O1xufVxuXG4uaWNvbiB7XG4gIGZvbnQtZmFtaWx5OiBcIml**25mb250XCIgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxNnB4O1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xuICAtbW96LW9zeC1mb250LXNtb290aGluZzogZ3JheXNjYWxlO1xufVxuXG4uYmxvY2stYmcge1xuICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoLi9hc3NldHMvd2VicGFjay1**2**LnN2ZykgO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/
由于在前面我们应用了如下配置，使生产环境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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
由此可见，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 & CEOnLikes 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 & CEOn
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
编辑切换为居中
添加图片注释，不超过 140 字（可选）
现在，toml、yaml和json5几个类型的文件都正常输出了结果。
拓展知识：
wx5c
WX5C
1400万
24的广角
全景
3D全景
虚化模式
新加入的美肤功能
这款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄机身，快门速度快，没其他功能
wx5c
WX5C，背照式CMOS感光元件是最大优势，ISO800照片仍可用，130在ISO800下已比较模糊了，第三就是大光圈，适合拍人像
而且3D拍摄也非常吸引人
wx5c
本人
推荐
佳能130
佳能
是专业的
索尼
大多数只是外观好看
性价比
不如
佳能好
wx5c
当然是佳能IXUS130I好，索尼的产品只是注重外观，性能与佳能还是有一定差距。
wx5c
佳能比索尼好
索尼的外观设计好，但拍照性能未必能胜过佳能
要外观好看，就选索尼，要拍出来的照片好看，就选佳能
原创文章，作者：九贤生活小编，如若转载，请注明出处：http://www.wangguangwei.com/89328.html
相关推荐
-
路由器设置教程(路由器怎么安装设置使用教程)
前沿拓展： 路由器设置教程 路由器wifi设置教程如下： 1、路由器连接好之后，连打开ie浏览器，在地址栏中输入192.168.1.1进入**路由器的设置界面。 2、登录设置参数，…
-
爱普生打印机售后电话-爱普生57900怎么样
爱普生的打印机配有超大容量墨水，在进行海量打印的时候也不会花费太多的金额，另外爱普生打印机采用了特有的微压电打印技术，这种即使可以很好的保证其长久的使用寿命和稳定的工作性能。
-
nex-5t
前沿拓展： nex-5t 索尼 NEX-5T套机（16-50mm） 好 数码相机 – 索尼 产品类型：微单 有效像素：1610mm） 高清摄像：全高清（1080） 产品…
-
尼康最新单反相机-尼康单反相机开不了机
1、首先确认电池是否有电，充满电再开机试试，开机前先不要放内存卡，然后开机，如果能开机，再放入内存卡，如果内存卡不能够正常读写，那么再换一张试一试。
-
南京珠江路电脑城在哪里(南京哪里买电脑比较好)
大家好，感谢邀请，今天来为大家分享一下南京珠江路电脑城在哪里的问题，以及和南京哪里买电脑比较好的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到…
-
戴尔笔记本i5系列报价查询，戴尔i5笔记本配置参数
戴尔笔记本i5系列报价查询，戴尔i5笔记本配置参数 1、戴尔灵越5000系列全新笔记本包括二合一笔记本、13英寸以及14英寸等多款轻薄笔记本电脑，他在外形设计上完全不输市面上很多*…
-
ap wifi
前沿拓展： ap wifi **AP是**接入点，典型常见的设备就是家用**路由器Wi-Fi是一种可以将个人电脑、手持设备（如PDA、手机）等终端以**方式互相连接的技术 我们过去…
-
**路由怎么设置(**路由连接**路由怎么设置)
前沿拓展： **路由怎么设置 第二个**路由器的设置方法和第一个是一样的，具体的设置**作方法为： 1、打开很印修点居浏览器，输入192.168.1.1，并跳转到无线设置界面。 2…
-
华为路由ws5200(华为路由ws5200增强版)
前沿拓展： 还记得华为路由WS5200自从一上市就口碑销量双丰收，关键是好用，我家的那台用着感觉就是网速稳、不掉线、速度快。作为业界首创的“真双频”路由器，搭配了千兆网口和千兆Wi…
-
内存条选购要点(内存条越多越好吗)
大家好，关于内存条选购要点很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于内存条越多越好**知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，…