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, getCustomBabelConfigFilePath,
getMinimizer, getMinimizer,
} from './utils'; } from './utils';
import {STATIC_ASSETS_DIR_NAME} from '../constants';
const CSS_REGEX = /\.css$/; const CSS_REGEX = /\.css$/;
const CSS_MODULE_REGEX = /\.module\.css$/; const CSS_MODULE_REGEX = /\.module\.css$/;
@ -91,6 +92,14 @@ export function createBaseConfig(
resolve: { resolve: {
extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'], extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
symlinks: true, 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: { alias: {
'@site': siteDir, '@site': siteDir,
'@generated': generatedFilesDir, '@generated': generatedFilesDir,
@ -152,6 +161,7 @@ export function createBaseConfig(
module: { module: {
rules: [ rules: [
fileLoaderUtils.rules.images(), fileLoaderUtils.rules.images(),
fileLoaderUtils.rules.fonts(),
fileLoaderUtils.rules.media(), fileLoaderUtils.rules.media(),
fileLoaderUtils.rules.svg(), fileLoaderUtils.rules.svg(),
fileLoaderUtils.rules.otherAssets(), 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 // Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
export function getFileLoaderUtils(): Record<string, any> { 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 * Loads audio and video and inlines them via a data URI if they are below
* the size threshold * the size threshold