本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01css引入字体文件影响性能-css半透明的渐变设置方法

在webpack 5中，您能够根据内嵌的Asset控制模块接受和载入一切文档，随后将其輸出到搭建文件目录。那样，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文件目录下。从系统软件中寻找字体样式資源微软雅黑，它由三个文档构成: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中加上对形状的引入:

webpack 資源引入字体样式实例 msyh msyhbd msyhl

在src/index.js文件中，加上对style.css的引入:

import './style.css'

最终，在当地安裝款式加载器。

npm 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 Resource Management I中载入CSS的详细说明中package.json文档的內容，随后实行新项目搭建实际操作，npm运作build。

npm run build> webpack-fonts@1.0.0 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文档，开展实际效果查询。从文件目录中还可以看得出，引入的字体样式是依照一定的命名规范装包取名的。随后开启index.html文档，查验实际效果。

网页页面实际效果