https://github.com/lakphy/fontsliceplugin
一个基于woff2和fontmin的webpack字体分片工具
https://github.com/lakphy/fontsliceplugin
Last synced: about 1 year ago
JSON representation
一个基于woff2和fontmin的webpack字体分片工具
- Host: GitHub
- URL: https://github.com/lakphy/fontsliceplugin
- Owner: Lakphy
- License: mit
- Created: 2023-11-25T07:07:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-05T07:31:28.000Z (over 2 years ago)
- Last Synced: 2025-04-09T19:07:53.214Z (about 1 year ago)
- Language: JavaScript
- Size: 272 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Font Slice Webpack Plugin
This plugin is used to split font files into single font files, so that font files can be loaded on demand in different pages.
It's my first time to write a webpack plugin. I hope it can help you.
usage:
```js
{
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
config.plugins.push(
new FontSlicePlugin({
fontDirectory: "public/web_fonts", // font directory
assetsDirectory: ".next/static", // assets directory
tempDirectory: ".temp", // temp directory, please make sure it's in .gitignore
})
);
return config;
};
}
```
# Use Script Instead of Plugin?
You can use font-slice-plugin in your npm script now!
`package.json`
```json
{
"scripts": {
"build:fonts": "node scripts/build-fonts.js"
}
}
```
`scripts/build-fonts.js`
```js
const { fontSliceWorker } = require("font-slice-plugin");
fontSliceWorker({
fontDirectory: "public/web_fonts", // font directory
assetsDirectory: "public/static", // assets directory
tempDirectory: ".temp", // temp directory, please make sure it's in .gitignore
});
```
`(in your terminal)`
```bash
npm run build:fonts
```