feat(v2): add fonts loaders + webpack resolve.roots (#4198)

see https://github.com/webpack-contrib/css-loader/issues/1256
This commit is contained in:
Sébastien Lorber 2021-02-09 15:33:13 +01:00 committed by GitHub
parent 74a58efe16
commit 2a12869fc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 1 deletions

View file

@ -19,6 +19,7 @@ import {
getCustomBabelConfigFilePath,
getMinimizer,
} from './utils';
import {STATIC_ASSETS_DIR_NAME} from '../constants';
const CSS_REGEX = /\.css$/;
const CSS_MODULE_REGEX = /\.module\.css$/;
@ -91,6 +92,14 @@ export function createBaseConfig(
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
symlinks: true,
roots: [
// Allow resolution of url("/fonts/xyz.ttf") by webpack
// See https://webpack.js.org/configuration/resolve/#resolveroots
// See https://github.com/webpack-contrib/css-loader/issues/1256
path.join(siteDir, STATIC_ASSETS_DIR_NAME),
siteDir,
process.cwd(),
],
alias: {
'@site': siteDir,
'@generated': generatedFilesDir,
@ -152,6 +161,7 @@ export function createBaseConfig(
module: {
rules: [
fileLoaderUtils.rules.images(),
fileLoaderUtils.rules.fonts(),
fileLoaderUtils.rules.media(),
fileLoaderUtils.rules.svg(),
fileLoaderUtils.rules.otherAssets(),

View file

@ -235,7 +235,7 @@ export function compile(config: Configuration[]): Promise<Stats.ToJsonOutput> {
});
}
type AssetFolder = 'images' | 'files' | 'medias';
type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
// Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
export function getFileLoaderUtils(): Record<string, any> {
@ -291,6 +291,13 @@ export function getFileLoaderUtils(): Record<string, any> {
};
},
fonts: (): RuleSetRule => {
return {
use: [loaders.url({folder: 'fonts'})],
test: /\.(woff|woff2|eot|ttf|otf)$/,
};
},
/**
* Loads audio and video and inlines them via a data URI if they are below
* the size threshold