前沿拓展：
1.6.4 加載 images 圖像
假如，現(xiàn)在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？在 webpack 5 中，可以使用內(nèi)置的 Asset Modules，我們可以輕松地將這些內(nèi)容混入我們的系統(tǒng)中，這個(gè)我們?cè)?#034;資源模塊"一節(jié)中已經(jīng)介紹了。這里再補(bǔ)充一個(gè)知識(shí)點(diǎn)，在 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
// 導(dǎo)入模塊
//…
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)
//…
啟動(dòng)服務(wù)，打開瀏覽器：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們看到，通過樣式把背景圖片加到了頁(yè)面中。
1.6.5 加載 fonts 字體
那么，像字體這樣的其他資源如何處理呢？使用 Asset Modules 可以接收并加載任何文件，第二將其輸出到構(gòu)建目錄。這就是說，我們可以將它們用于任何類型的文件，也包括字體。讓我們更新 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',
},
],
},
//…
}
在項(xiàng)目中添加一些字體文件：
?
編輯
添加圖片注釋，不超過 140 字（可選）
配置好 loader 并將字體文件放在合適的位置后，你可以通過一個(gè) @font-face 聲明將其混合。本地的 url(…) 指令會(huì)被 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
// 導(dǎo)入模塊
//…
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
啟動(dòng)服務(wù)，打開瀏覽器：
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們?cè)俅虬幌拢纯摧敵龅奈募?/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-**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==*/
由于在前面我們應(yīng)用了如下配置，使生產(chǎn)環(huán)境css 文件也進(jìn)行了壓縮處理。我們可以注釋它：
optimization: {
// minimize: true,
}1.6.6 加載數(shù)據(jù)
此外，可以加載的有用資源還有數(shù)據(jù)，如 JSON 文件，CSV、TSV 和 XML。類似于 NodeJS，JSON 支持實(shí)際上是內(nèi)置的，也就是說 import Data from './data.json' 默認(rèn)將正常運(yùn)行。要導(dǎo)入 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'],
},
],
},
//…
}
現(xiàn)在，你可以 import 這四種類型的數(shù)據(jù)(JSON, CSV, TSV, XML)中的任何一種，所導(dǎo)入的 Data 變量，將包含可直接使用的已解析 JSON：
創(chuàng)建兩個(gè)文件：
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
在入口文件里加載數(shù)據(jù)模塊，并在控制臺(tái)上打印導(dǎo)入內(nèi)容：
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
console.log(Data)
console.log(Notes)
07-manage-assets/src/index.js
// 導(dǎo)入模塊
//…
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
//…
console.log(Data)
console.log(Notes)
查看開發(fā)者工具中的控制臺(tái)，你應(yīng)該能夠看到導(dǎo)入的數(shù)據(jù)會(huì)被打印出來！
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
由此可見，data.xml文件轉(zhuǎn)化為一個(gè)JS對(duì)象，data.cvs轉(zhuǎn)化為一個(gè)數(shù)組。
1.6.7 自定義 JSON 模塊 parser
通過使用 自定義 parser 替代特定的 webpack loader，可以將任何 toml、yaml 或 json5 文件作為 JSON 模塊導(dǎo)入。
假設(shè)你在 src 文件夾下有一個(gè) data.toml、一個(gè) data.yaml 以及一個(gè) 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,
},
},
],
},
//…
}
在主文件中引入模塊，并打印內(nèi)容：
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
// 導(dǎo)入模塊
//…
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`
啟動(dòng)服務(wù)，打開瀏覽器：
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
現(xiàn)在，toml、yaml和json5幾個(gè)類型的文件都正常輸出了結(jié)果。
拓展知識(shí)：
wx5c
WX5C
1400萬(wàn)
24的廣角
全景
3D全景
虛化模式
新加入的美膚功能
這款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄機(jī)身，快門速度快，沒其他功能
wx5c
WX5C，背照式CMOS感光元件是最大優(yōu)勢(shì)，ISO800照片仍可用，130在ISO800下已比較模糊了，第三就是大光圈，適合拍人像
而且3D拍攝也非常吸引人
wx5c
本人
推薦
佳能130
佳能
是專業(yè)的
索尼
大多數(shù)只是外觀好看
性價(jià)比
不如
佳能好
wx5c
當(dāng)然是佳能IXUS130I好，索尼的產(chǎn)品只是注重外觀，性能與佳能還是有一定差距。
wx5c
佳能比索尼好
索尼的外觀設(shè)計(jì)好，但拍照性能未必能勝過佳能
要外觀好看，就選索尼，要拍出來的照片好看，就選佳能
前沿拓展：
1.6.4 加載 images 圖像
假如，現(xiàn)在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？在 webpack 5 中，可以使用內(nèi)置的 Asset Modules，我們可以輕松地將這些內(nèi)容混入我們的系統(tǒng)中，這個(gè)我們?cè)?#034;資源模塊"一節(jié)中已經(jīng)介紹了。這里再補(bǔ)充一個(gè)知識(shí)點(diǎn)，在 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
// 導(dǎo)入模塊
//…
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)
//…
啟動(dòng)服務(wù)，打開瀏覽器：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們看到，通過樣式把背景圖片加到了頁(yè)面中。
1.6.5 加載 fonts 字體
那么，像字體這樣的其他資源如何處理呢？使用 Asset Modules 可以接收并加載任何文件，第二將其輸出到構(gòu)建目錄。這就是說，我們可以將它們用于任何類型的文件，也包括字體。讓我們更新 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',
},
],
},
//…
}
在項(xiàng)目中添加一些字體文件：
?
編輯
添加圖片注釋，不超過 140 字（可選）
配置好 loader 并將字體文件放在合適的位置后，你可以通過一個(gè) @font-face 聲明將其混合。本地的 url(…) 指令會(huì)被 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
// 導(dǎo)入模塊
//…
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
啟動(dòng)服務(wù)，打開瀏覽器：
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們?cè)俅虬幌拢纯摧敵龅奈募?/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-**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==*/
由于在前面我們應(yīng)用了如下配置，使生產(chǎn)環(huán)境css 文件也進(jìn)行了壓縮處理。我們可以注釋它：
optimization: {
// minimize: true,
}1.6.6 加載數(shù)據(jù)
此外，可以加載的有用資源還有數(shù)據(jù)，如 JSON 文件，CSV、TSV 和 XML。類似于 NodeJS，JSON 支持實(shí)際上是內(nèi)置的，也就是說 import Data from './data.json' 默認(rèn)將正常運(yùn)行。要導(dǎo)入 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'],
},
],
},
//…
}
現(xiàn)在，你可以 import 這四種類型的數(shù)據(jù)(JSON, CSV, TSV, XML)中的任何一種，所導(dǎo)入的 Data 變量，將包含可直接使用的已解析 JSON：
創(chuàng)建兩個(gè)文件：
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
在入口文件里加載數(shù)據(jù)模塊，并在控制臺(tái)上打印導(dǎo)入內(nèi)容：
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
console.log(Data)
console.log(Notes)
07-manage-assets/src/index.js
// 導(dǎo)入模塊
//…
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
//…
console.log(Data)
console.log(Notes)
查看開發(fā)者工具中的控制臺(tái)，你應(yīng)該能夠看到導(dǎo)入的數(shù)據(jù)會(huì)被打印出來！
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
由此可見，data.xml文件轉(zhuǎn)化為一個(gè)JS對(duì)象，data.cvs轉(zhuǎn)化為一個(gè)數(shù)組。
1.6.7 自定義 JSON 模塊 parser
通過使用 自定義 parser 替代特定的 webpack loader，可以將任何 toml、yaml 或 json5 文件作為 JSON 模塊導(dǎo)入。
假設(shè)你在 src 文件夾下有一個(gè) data.toml、一個(gè) data.yaml 以及一個(gè) 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,
},
},
],
},
//…
}
在主文件中引入模塊，并打印內(nèi)容：
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
// 導(dǎo)入模塊
//…
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`
啟動(dòng)服務(wù)，打開瀏覽器：
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
現(xiàn)在，toml、yaml和json5幾個(gè)類型的文件都正常輸出了結(jié)果。
拓展知識(shí)：
wx5c
WX5C
1400萬(wàn)
24的廣角
全景
3D全景
虛化模式
新加入的美膚功能
這款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄機(jī)身，快門速度快，沒其他功能
wx5c
WX5C，背照式CMOS感光元件是最大優(yōu)勢(shì)，ISO800照片仍可用，130在ISO800下已比較模糊了，第三就是大光圈，適合拍人像
而且3D拍攝也非常吸引人
wx5c
本人
推薦
佳能130
佳能
是專業(yè)的
索尼
大多數(shù)只是外觀好看
性價(jià)比
不如
佳能好
wx5c
當(dāng)然是佳能IXUS130I好，索尼的產(chǎn)品只是注重外觀，性能與佳能還是有一定差距。
wx5c
佳能比索尼好
索尼的外觀設(shè)計(jì)好，但拍照性能未必能勝過佳能
要外觀好看，就選索尼，要拍出來的照片好看，就選佳能
前沿拓展：
1.6.4 加載 images 圖像
假如，現(xiàn)在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？在 webpack 5 中，可以使用內(nèi)置的 Asset Modules，我們可以輕松地將這些內(nèi)容混入我們的系統(tǒng)中，這個(gè)我們?cè)?#034;資源模塊"一節(jié)中已經(jīng)介紹了。這里再補(bǔ)充一個(gè)知識(shí)點(diǎn)，在 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
// 導(dǎo)入模塊
//…
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)
//…
啟動(dòng)服務(wù)，打開瀏覽器：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們看到，通過樣式把背景圖片加到了頁(yè)面中。
1.6.5 加載 fonts 字體
那么，像字體這樣的其他資源如何處理呢？使用 Asset Modules 可以接收并加載任何文件，第二將其輸出到構(gòu)建目錄。這就是說，我們可以將它們用于任何類型的文件，也包括字體。讓我們更新 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',
},
],
},
//…
}
在項(xiàng)目中添加一些字體文件：
?
編輯
添加圖片注釋，不超過 140 字（可選）
配置好 loader 并將字體文件放在合適的位置后，你可以通過一個(gè) @font-face 聲明將其混合。本地的 url(…) 指令會(huì)被 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
// 導(dǎo)入模塊
//…
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
啟動(dòng)服務(wù)，打開瀏覽器：
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們?cè)俅虬幌拢纯摧敵龅奈募?/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-**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==*/
由于在前面我們應(yīng)用了如下配置，使生產(chǎn)環(huán)境css 文件也進(jìn)行了壓縮處理。我們可以注釋它：
optimization: {
// minimize: true,
}1.6.6 加載數(shù)據(jù)
此外，可以加載的有用資源還有數(shù)據(jù)，如 JSON 文件，CSV、TSV 和 XML。類似于 NodeJS，JSON 支持實(shí)際上是內(nèi)置的，也就是說 import Data from './data.json' 默認(rèn)將正常運(yùn)行。要導(dǎo)入 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'],
},
],
},
//…
}
現(xiàn)在，你可以 import 這四種類型的數(shù)據(jù)(JSON, CSV, TSV, XML)中的任何一種，所導(dǎo)入的 Data 變量，將包含可直接使用的已解析 JSON：
創(chuàng)建兩個(gè)文件：
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
在入口文件里加載數(shù)據(jù)模塊，并在控制臺(tái)上打印導(dǎo)入內(nèi)容：
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
console.log(Data)
console.log(Notes)
07-manage-assets/src/index.js
// 導(dǎo)入模塊
//…
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
//…
console.log(Data)
console.log(Notes)
查看開發(fā)者工具中的控制臺(tái)，你應(yīng)該能夠看到導(dǎo)入的數(shù)據(jù)會(huì)被打印出來！
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
由此可見，data.xml文件轉(zhuǎn)化為一個(gè)JS對(duì)象，data.cvs轉(zhuǎn)化為一個(gè)數(shù)組。
1.6.7 自定義 JSON 模塊 parser
通過使用 自定義 parser 替代特定的 webpack loader，可以將任何 toml、yaml 或 json5 文件作為 JSON 模塊導(dǎo)入。
假設(shè)你在 src 文件夾下有一個(gè) data.toml、一個(gè) data.yaml 以及一個(gè) 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,
},
},
],
},
//…
}
在主文件中引入模塊，并打印內(nèi)容：
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
// 導(dǎo)入模塊
//…
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`
啟動(dòng)服務(wù)，打開瀏覽器：
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
現(xiàn)在，toml、yaml和json5幾個(gè)類型的文件都正常輸出了結(jié)果。
拓展知識(shí)：
wx5c
WX5C
1400萬(wàn)
24的廣角
全景
3D全景
虛化模式
新加入的美膚功能
這款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄機(jī)身，快門速度快，沒其他功能
wx5c
WX5C，背照式CMOS感光元件是最大優(yōu)勢(shì)，ISO800照片仍可用，130在ISO800下已比較模糊了，第三就是大光圈，適合拍人像
而且3D拍攝也非常吸引人
wx5c
本人
推薦
佳能130
佳能
是專業(yè)的
索尼
大多數(shù)只是外觀好看
性價(jià)比
不如
佳能好
wx5c
當(dāng)然是佳能IXUS130I好，索尼的產(chǎn)品只是注重外觀，性能與佳能還是有一定差距。
wx5c
佳能比索尼好
索尼的外觀設(shè)計(jì)好，但拍照性能未必能勝過佳能
要外觀好看，就選索尼，要拍出來的照片好看，就選佳能
前沿拓展：
1.6.4 加載 images 圖像
假如，現(xiàn)在我們正在下載 CSS，但是像 background 和 icon 這樣的圖像，要如何處理呢？在 webpack 5 中，可以使用內(nèi)置的 Asset Modules，我們可以輕松地將這些內(nèi)容混入我們的系統(tǒng)中，這個(gè)我們?cè)?#034;資源模塊"一節(jié)中已經(jīng)介紹了。這里再補(bǔ)充一個(gè)知識(shí)點(diǎn)，在 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
// 導(dǎo)入模塊
//…
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)
//…
啟動(dòng)服務(wù)，打開瀏覽器：
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們看到，通過樣式把背景圖片加到了頁(yè)面中。
1.6.5 加載 fonts 字體
那么，像字體這樣的其他資源如何處理呢？使用 Asset Modules 可以接收并加載任何文件，第二將其輸出到構(gòu)建目錄。這就是說，我們可以將它們用于任何類型的文件，也包括字體。讓我們更新 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',
},
],
},
//…
}
在項(xiàng)目中添加一些字體文件：
?
編輯
添加圖片注釋，不超過 140 字（可選）
配置好 loader 并將字體文件放在合適的位置后，你可以通過一個(gè) @font-face 聲明將其混合。本地的 url(…) 指令會(huì)被 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
// 導(dǎo)入模塊
//…
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = ''
document.body.appendChild(span)
啟動(dòng)服務(wù)，打開瀏覽器：
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
我們?cè)俅虬幌拢纯摧敵龅奈募?/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-**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==*/
由于在前面我們應(yīng)用了如下配置，使生產(chǎn)環(huán)境css 文件也進(jìn)行了壓縮處理。我們可以注釋它：
optimization: {
// minimize: true,
}1.6.6 加載數(shù)據(jù)
此外，可以加載的有用資源還有數(shù)據(jù)，如 JSON 文件，CSV、TSV 和 XML。類似于 NodeJS，JSON 支持實(shí)際上是內(nèi)置的，也就是說 import Data from './data.json' 默認(rèn)將正常運(yùn)行。要導(dǎo)入 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'],
},
],
},
//…
}
現(xiàn)在，你可以 import 這四種類型的數(shù)據(jù)(JSON, CSV, TSV, XML)中的任何一種，所導(dǎo)入的 Data 變量，將包含可直接使用的已解析 JSON：
創(chuàng)建兩個(gè)文件：
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
在入口文件里加載數(shù)據(jù)模塊，并在控制臺(tái)上打印導(dǎo)入內(nèi)容：
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
console.log(Data)
console.log(Notes)
07-manage-assets/src/index.js
// 導(dǎo)入模塊
//…
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
//…
console.log(Data)
console.log(Notes)
查看開發(fā)者工具中的控制臺(tái)，你應(yīng)該能夠看到導(dǎo)入的數(shù)據(jù)會(huì)被打印出來！
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
由此可見，data.xml文件轉(zhuǎn)化為一個(gè)JS對(duì)象，data.cvs轉(zhuǎn)化為一個(gè)數(shù)組。
1.6.7 自定義 JSON 模塊 parser
通過使用 自定義 parser 替代特定的 webpack loader，可以將任何 toml、yaml 或 json5 文件作為 JSON 模塊導(dǎo)入。
假設(shè)你在 src 文件夾下有一個(gè) data.toml、一個(gè) data.yaml 以及一個(gè) 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,
},
},
],
},
//…
}
在主文件中引入模塊，并打印內(nèi)容：
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
// 導(dǎo)入模塊
//…
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`
啟動(dòng)服務(wù)，打開瀏覽器：
[felix] 07-manage-assets $ npx webpack serve
?
編輯切換為居中
添加圖片注釋，不超過 140 字（可選）
現(xiàn)在，toml、yaml和json5幾個(gè)類型的文件都正常輸出了結(jié)果。
拓展知識(shí)：
wx5c
WX5C
1400萬(wàn)
24的廣角
全景
3D全景
虛化模式
新加入的美膚功能
這款感光度也提高了，拍出的相片很漂亮
IXUS130
除了超薄機(jī)身，快門速度快，沒其他功能
wx5c
WX5C，背照式CMOS感光元件是最大優(yōu)勢(shì)，ISO800照片仍可用，130在ISO800下已比較模糊了，第三就是大光圈，適合拍人像
而且3D拍攝也非常吸引人
wx5c
本人
推薦
佳能130
佳能
是專業(yè)的
索尼
大多數(shù)只是外觀好看
性價(jià)比
不如
佳能好
wx5c
當(dāng)然是佳能IXUS130I好，索尼的產(chǎn)品只是注重外觀，性能與佳能還是有一定差距。
wx5c
佳能比索尼好
索尼的外觀設(shè)計(jì)好，但拍照性能未必能勝過佳能
要外觀好看，就選索尼，要拍出來的照片好看，就選佳能
原創(chuàng)文章，作者：九賢生活小編，如若轉(zhuǎn)載，請(qǐng)注明出處：http://www.cddhlm.com/89328.html
相關(guān)推薦
-
開放端口掃描-筆記本win10不顯示端口
正常的漏掃軟件會(huì)多線程并發(fā)去掃描，這種掃描量比較大，防火墻容易區(qū)分，但如果惡意用戶把掃描間隔加大，如果每1秒只掃一個(gè)端口，那么防火墻是不會(huì)阻攔的，你開了什么端口對(duì)方想掃出來只是時(shí)間問題。
-
擴(kuò)容卡檢測(cè)-我的內(nèi)存卡總是在傳輸文件的時(shí)候損壞或是傳輸完不長(zhǎng)時(shí)間就壞掉怎么回事
你好，一般2G.4G.8G.16G.32G.64G.128G手機(jī)內(nèi) 存卡內(nèi)存參數(shù)分別是:2G內(nèi)存不高于(1.8GB)、4G 內(nèi)存不高于(3.8GB)、8G內(nèi)存不高于 (7.5G)、16G內(nèi)存不高于(15GB)、32G內(nèi)存 不高于(30GB)、64G內(nèi)存不高于(60GB)、 128G內(nèi)存不高于(120GB)如果高于此內(nèi)存容 量，就有可能是假卡，水卡，擴(kuò)容卡，那你可 以用最直接辦法測(cè)試，把內(nèi)存卡裝滿電影逐個(gè)播放 測(cè)試一下，如出現(xiàn)文件消失，報(bào)錯(cuò)，內(nèi)存不足等問題，就肯定是假卡，也 會(huì)長(zhǎng)期導(dǎo)致不兼容。內(nèi)存卡卡速一般C2.C4.C6.C8.C10 內(nèi)存卡速度參數(shù):Class2讀寫不低于(2MB/ sec)、Class4讀寫不低于(4MB/sec)、 Class6讀寫不低于(6MB/sec)、Class8讀寫 不低于(8MB/sec)、Class10讀寫不低于 (10MB/sec）如果低于就有可能是 假卡，你也可以用1G的文件讀寫來直接測(cè)試，一般C4卡復(fù)制1G文件寫入需要9分鐘，C10卡復(fù)制1G文件寫入需要4分鐘，如果低于包裝盒上參數(shù)，也有可能是假的高速卡，希望對(duì)你有幫助
-
尼康單反相機(jī)怎么樣(尼康單反好嗎)
前沿拓展： 說起尼康，可謂是大名鼎鼎。尼康是單反時(shí)代的兩大巨頭之一， 也是微單時(shí)代的三大巨頭之一。在單反時(shí)代，很多人可能更熟悉佳能，而在微單時(shí)代，很多人可能更熟悉索尼，但是一些比較…
-
戴爾153511，戴爾153558配置
戴爾153511，戴爾153558配置 1、i5-1135G7(4核心8線程-2Ghz)。i5-1155G7(4核心8線程5GHz)。R7-5800H(八核16線程4GHz)。 2…
-
天威有線(天威有線電視客服電話 深圳)
前沿拓展： 天威有線 深圳南山區(qū)的天威營(yíng)業(yè)廳地址： 南山區(qū)后海大道云海天城世家一樓積它后19號(hào)（在”國(guó)美電器”斜對(duì)面，即后海大道與創(chuàng) 業(yè)路交叉口向南走的右邊…
-
w619刷機(jī)教程-vivos9e手機(jī)配置參數(shù)
后置：數(shù)碼變焦(最高10倍)，拍攝優(yōu)化，自動(dòng)微笑捕捉，手勢(shì)自拍，智能構(gòu)圖，HDR，定時(shí)器，活動(dòng)照片，手動(dòng)模式，人像模式，摳像，微距，專色，電影膠片，全景，實(shí)時(shí)濾鏡，高- res縮放，RAW照片輸出，Google Lens?集成，夜視
-
惠普打印機(jī)驅(qū)動(dòng)下載-惠普打印機(jī)安裝什么驅(qū)動(dòng)
四、在“通過 USB 端口進(jìn)行連接”窗口中，將打印機(jī) USB 連接線連接到電腦，并且開啟打印機(jī)電源，驅(qū)動(dòng)程序會(huì)自動(dòng)檢查連接的設(shè)備。
-
pppoe撥號(hào)(pppoe撥號(hào)無(wú)法獲取地址)
前沿拓展： pppoe撥號(hào) 設(shè)置PPPoE撥號(hào)上網(wǎng)步驟 第一步： 點(diǎn)擊“開始”菜單，第二點(diǎn)擊”控制面板”，進(jìn)入到了計(jì)算機(jī)設(shè)置界面，點(diǎn)擊”查看 網(wǎng)站狀態(tài)和任務(wù)…
-
tp-link路由器怎么設(shè)置-link**路由器后是怎么設(shè)置的
1、路由器（Router），是連接因特網(wǎng)中各局域網(wǎng)、廣域網(wǎng)的設(shè)備，它會(huì)根據(jù)信道的情況自動(dòng)選擇和設(shè)定路由，以最佳路徑，按前后順序發(fā)送信號(hào)。
-
wan口未連接是什么意思
前沿拓展： 電腦使用時(shí)發(fā)現(xiàn)右下角出現(xiàn)感嘆號(hào)，而且無(wú)法使用網(wǎng)絡(luò)，這是什么問題？ 一：檢查電腦網(wǎng)卡是不是被配置了錯(cuò)誤的靜態(tài)IP地址。 打開控制面板-網(wǎng)絡(luò)和 Internet-網(wǎng)絡(luò)連接。…