这样，将 Asset 模块用于任何类型的文件，即其也可以处理字体文件。
初始化示例工程创建一个字体示例工程：webpack-fonts，然后在目录webpack-fonts执行相关初始化工作：mkdir webpack-fontscd webpack-fontsnpm init -ynpm install webpack webpack-cli --save-dev工程目录结构：工程初始化目录结构加载及配置字体资源从系统中找到字体资源微软雅黑，共三个文件：msyh.ttc、msyhl.ttc、msyhbd.ttc，然后把这个三个字体文件放到工程的src目录下。
字体列表编写一个样式文件style.css放入工程的src目录，在样式文件中引入字体文件，其style.css的文件内容如下：@font-face { font-family: 'msyh'; src: url('./msyh.ttc');} .webpack-font-msyh { font-family: 'msyh';}@font-face { font-family: 'msyhbd'; src: url('./msyhbd.ttc');}.webpack-font-msyhbd { font-family: 'msyhbd';}@font-face { font-family: 'msyhl'; src: url('./msyhl.ttc');}在dist/index.html中添加对样式的引用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack 资源引用字体示例</title> <script src="bundle.js"></script></head><body> <div class="webpack-font-msyh">msyh</div> <div class="webpack-font-msyhbd">msyhbd</div> <div class="webpack-font-msyhl">msyhl</div></body></html>在src/index.js文件中，添加style.css的引用：import './style.css'最后在本地安装样式loadernpm install style-loader css-loader --save-dev然后配置内置Asset 对应的文件解析规则，其webpack.config.js的配置内容如下：const path= require('path')module.exports = { entry: "./src/index.js", output: { filename: 'bundle.js', path: path.resolve(__dirname,'dist') }, module: { rules: [ { test: /.css$/i, use: ["style-loader", "css-loader"] }, { test: /.(ttc|woff|woff2|eot)$/i, type: 'asset/resource' } ] }}其中package.json请参考webpack资源管理一之加载 CSS使用详解 中的package.json文件内容，然后执行项目构建 *** 作，npm run buildnpm run build> [email protected] build D:workwebpack5webpack-fonts> webpackasset 8509756933a61d2bb349.ttc 18.7 MiB [emitted] [immutable] [from: src/msyh.ttc] [big] (auxiliary name: main)asset 1192744f6d4a8556eef2.ttc 16 MiB [emitted] [immutable] [from: src/msyhbd.ttc] [big] (auxiliary name: main)asset 33cbc54e3a13fb6ab968.ttc 11.6 MiB [emitted] [immutable] [from: src/msyhl.ttc] [big] (auxiliary name: main)asset bundle.js 4.97 KiB [emitted] [minimized] (name: main)runtime modules 1.7 KiB 5 modulesorphan modules 326 bytes [orphan] 1 modulecacheable modules 10.9 KiB (javascript) 46.4 MiB (asset) javascript modules 10.8 KiB modules by path ./node_modules/ 9.04 KiB ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated] ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated] ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated] modules by path ./src/ 1.75 KiB ./src/index.js + 1 modules 346 bytes [built] [code generated] ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.42 KiB [built] [code generated] asset modules 126 bytes (javascript) 46.4 MiB (asset) ./src/msyh.ttc 42 bytes (javascript) 18.7 MiB (asset) [built] [code generated] ./src/msyhbd.ttc 42 bytes (javascript) 16 MiB (asset) [built] [code generated] ./src/msyhl.ttc 42 bytes (javascript) 11.6 MiB (asset) [built] [code generated]WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.Assets: 8509756933a61d2bb349.ttc (18.7 MiB) 1192744f6d4a8556eef2.ttc (16 MiB) 33cbc54e3a13fb6ab968.ttc (11.6 MiB)WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.For more info visit https://webpack.js.org/guides/code-splitting/webpack 5.11.1 compiled with 3 warnings in 4414 ms然后打开dist目录，查看文件：从目录中可以看到，按照一定的命名规则，对引用的字体进行打包命名。
然后打开index.html文件，进行效果查看。
页面效果
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）