Styjun

Is it possible to format a USB from a live USB?

What would happen if Protagoras v Euathlus were heard in court today?

Some Prime Peerage

How does a simple logistic regression model achieve a 92% classification accuracy on MNIST?

2000s space film where an alien species has almost wiped out the human race in a war

Does my opponent need to prove his creature has morph?

Ambiguity in notation resolved by +

How To Make Earth's Oceans as Brackish as Lyr's

'Overwrote' files, space still occupied, are they lost?

Why is the year in this ISO timestamp not 2019?

What is this gigantic dish at Ben Gurion airport?

Make 2019 with single digits

Can I travel to European countries with the Irish passport and without destination Visa?

What makes a smart phone "kosher"?

How can I use expandafter the expand the definition of this control sequence?

Examples of proofs by making reduction to a finite set

Insight into cavity resonators

How to give my students a straightedge instead of a ruler

Is it possible to determine the index of a bip32 address?

Are space camera sensors usually round, or square?

Is the Dodge action perceptible to other characters?

How do certain apps show new notifications when internet access is restricted to them?

Is my sink P-trap too low?

How much would a 1 foot tall human weigh?

How to preload a CSS @font-face font that is bundled by webpack4+babel?

Babel support for static class propertiesHow do I use .babelrc to get babel-plugin-import working for antd?webpack not bundling with babel-loader and reactCannot import react, Uncaught SyntaxError, Unexpected IdentifierWebpack4: Process CSS and SCSS file with separate entry pointMissing class properties transform in webpack/babelWhich is the appropriate loader to handle React JSX?How to prevent dynamic import to duplicate a bundle?React module build failed with babel and webpack4

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

5

1

I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the dist folder on build and its filename is hashed. I want to be able to preload this font.

Here is my LESS file:

@font-face 
 font-family: 'Test';
 src: url('../fonts/test.ttf') format('truetype');
 font-weight: 400;

I have tried the following approaches but so far with no success:

1. Add custom import to my app's main JS file.

import(/* webpackPreload: true */ "../fonts/test.ttf");

Here is my .babelrc file:

 "presets": [
 "@babel/preset-env",
 "@babel/preset-react"
 ],
 "plugins": [
 "@babel/plugin-syntax-dynamic-import"
 ]

Running webpack does not produce preload directions anywhere as far as I can see in the outputted html - I have searched through the dist folder contents and found nothing.

2. preload-webpack-plugin

I add this to my webpack.config.js file:

plugins: [
 new HtmlWebpackPlugin(),
 new PreloadWebpackPlugin(
 rel: 'preload',
 as(entry) 
 if (/.css$/.test(entry)) return 'style';
 if (/.woff$/.test(entry)) return 'font';
 if (/.png$/.test(entry)) return 'image';
 return 'script';
 
 )
]

This creates preloads for the JS script file bundles but not for the CSS and fonts.

Any ideas on how to get this to work?

reactjs babeljs webpack-4 preload

share|improve this question

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

add a comment
 | 

5

1

I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the dist folder on build and its filename is hashed. I want to be able to preload this font.

Here is my LESS file:

@font-face 
 font-family: 'Test';
 src: url('../fonts/test.ttf') format('truetype');
 font-weight: 400;

I have tried the following approaches but so far with no success:

1. Add custom import to my app's main JS file.

import(/* webpackPreload: true */ "../fonts/test.ttf");

Here is my .babelrc file:

 "presets": [
 "@babel/preset-env",
 "@babel/preset-react"
 ],
 "plugins": [
 "@babel/plugin-syntax-dynamic-import"
 ]

Running webpack does not produce preload directions anywhere as far as I can see in the outputted html - I have searched through the dist folder contents and found nothing.

2. preload-webpack-plugin

I add this to my webpack.config.js file:

plugins: [
 new HtmlWebpackPlugin(),
 new PreloadWebpackPlugin(
 rel: 'preload',
 as(entry) 
 if (/.css$/.test(entry)) return 'style';
 if (/.woff$/.test(entry)) return 'font';
 if (/.png$/.test(entry)) return 'image';
 return 'script';
 
 )
]

This creates preloads for the JS script file bundles but not for the CSS and fonts.

Any ideas on how to get this to work?

reactjs babeljs webpack-4 preload

share|improve this question

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

add a comment
 | 

I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the dist folder on build and its filename is hashed. I want to be able to preload this font.

Here is my LESS file:

@font-face 
 font-family: 'Test';
 src: url('../fonts/test.ttf') format('truetype');
 font-weight: 400;

I have tried the following approaches but so far with no success:

1. Add custom import to my app's main JS file.

import(/* webpackPreload: true */ "../fonts/test.ttf");

Here is my .babelrc file:

 "presets": [
 "@babel/preset-env",
 "@babel/preset-react"
 ],
 "plugins": [
 "@babel/plugin-syntax-dynamic-import"
 ]

Running webpack does not produce preload directions anywhere as far as I can see in the outputted html - I have searched through the dist folder contents and found nothing.

2. preload-webpack-plugin

I add this to my webpack.config.js file:

plugins: [
 new HtmlWebpackPlugin(),
 new PreloadWebpackPlugin(
 rel: 'preload',
 as(entry) 
 if (/.css$/.test(entry)) return 'style';
 if (/.woff$/.test(entry)) return 'font';
 if (/.png$/.test(entry)) return 'image';
 return 'script';
 
 )
]

This creates preloads for the JS script file bundles but not for the CSS and fonts.

Any ideas on how to get this to work?

reactjs babeljs webpack-4 preload

share|improve this question

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

@font-face 
 font-family: 'Test';
 src: url('../fonts/test.ttf') format('truetype');
 font-weight: 400;

import(/* webpackPreload: true */ "../fonts/test.ttf");

 "presets": [
 "@babel/preset-env",
 "@babel/preset-react"
 ],
 "plugins": [
 "@babel/plugin-syntax-dynamic-import"
 ]

plugins: [
 new HtmlWebpackPlugin(),
 new PreloadWebpackPlugin(
 rel: 'preload',
 as(entry) 
 if (/.css$/.test(entry)) return 'style';
 if (/.woff$/.test(entry)) return 'font';
 if (/.png$/.test(entry)) return 'image';
 return 'script';
 
 )
]

share|improve this question

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

share|improve this question

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

asked Mar 28 at 12:17

FrankFrank

7811 silver badge99 bronze badges

1 Answer
1

active

oldest

votes

-2

I believe to preload the font file you can just manually specify the <link /> in your index.html file:

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

See this for some details.

share|improve this answer

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response but my problem is that the font filenames are hashed by webpack and so I don't know what they will be after they are copied across to the dist folder. Perhaps there is a way of using a placeholder in the HTML file?
  
  – Frank
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Are your font files going to change often? Why do you need to include them to your webpack compilation process? I think you can create another assets folder to server static files which don't need to be compiled by webpack in parallel with a dist folder and serve static files from this folder as well
  
  – GProst
  Mar 29 at 15:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a fair point. The fonts won't change and even if they do, copying them across after the webpack build isn't too much effort. I presume that linking to the font files in the HTML (for preload) and also linking using @font-face in CSS (where they'll actually be used) is fine - i.e. once they are preloaded by the browser, then it won't bother doing so again?
  
  – Frank
  Mar 29 at 15:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I don't think there is any other way of preloading fonts other than using link. So even if you used some Webpack preload solution it would just insert the link with preload attribute that would load your asset. So yes I believe a browser shouldn't make another request if it already preloaded the asset however I think you'd want to put some cache-control headers so that browser cached the asset.
  
  – GProst
  Mar 29 at 15:42
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cheers. Your recommended approach is now in and working well.
  
  – Frank
  Apr 1 at 6:10
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55397432%2fhow-to-preload-a-css-font-face-font-that-is-bundled-by-webpack4babel%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

-2

I believe to preload the font file you can just manually specify the <link /> in your index.html file:

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

See this for some details.

share|improve this answer

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response but my problem is that the font filenames are hashed by webpack and so I don't know what they will be after they are copied across to the dist folder. Perhaps there is a way of using a placeholder in the HTML file?
  
  – Frank
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Are your font files going to change often? Why do you need to include them to your webpack compilation process? I think you can create another assets folder to server static files which don't need to be compiled by webpack in parallel with a dist folder and serve static files from this folder as well
  
  – GProst
  Mar 29 at 15:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a fair point. The fonts won't change and even if they do, copying them across after the webpack build isn't too much effort. I presume that linking to the font files in the HTML (for preload) and also linking using @font-face in CSS (where they'll actually be used) is fine - i.e. once they are preloaded by the browser, then it won't bother doing so again?
  
  – Frank
  Mar 29 at 15:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I don't think there is any other way of preloading fonts other than using link. So even if you used some Webpack preload solution it would just insert the link with preload attribute that would load your asset. So yes I believe a browser shouldn't make another request if it already preloaded the asset however I think you'd want to put some cache-control headers so that browser cached the asset.
  
  – GProst
  Mar 29 at 15:42
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cheers. Your recommended approach is now in and working well.
  
  – Frank
  Apr 1 at 6:10
  

  
  
  
  

 | 
show 1 more comment

-2

I believe to preload the font file you can just manually specify the <link /> in your index.html file:

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

See this for some details.

share|improve this answer

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the response but my problem is that the font filenames are hashed by webpack and so I don't know what they will be after they are copied across to the dist folder. Perhaps there is a way of using a placeholder in the HTML file?
  
  – Frank
  Mar 29 at 14:17
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Are your font files going to change often? Why do you need to include them to your webpack compilation process? I think you can create another assets folder to server static files which don't need to be compiled by webpack in parallel with a dist folder and serve static files from this folder as well
  
  – GProst
  Mar 29 at 15:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a fair point. The fonts won't change and even if they do, copying them across after the webpack build isn't too much effort. I presume that linking to the font files in the HTML (for preload) and also linking using @font-face in CSS (where they'll actually be used) is fine - i.e. once they are preloaded by the browser, then it won't bother doing so again?
  
  – Frank
  Mar 29 at 15:24
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I don't think there is any other way of preloading fonts other than using link. So even if you used some Webpack preload solution it would just insert the link with preload attribute that would load your asset. So yes I believe a browser shouldn't make another request if it already preloaded the asset however I think you'd want to put some cache-control headers so that browser cached the asset.
  
  – GProst
  Mar 29 at 15:42
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Cheers. Your recommended approach is now in and working well.
  
  – Frank
  Apr 1 at 6:10
  

  
  
  
  

 | 
show 1 more comment

I believe to preload the font file you can just manually specify the <link /> in your index.html file:

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

See this for some details.

share|improve this answer

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

<link rel="preload" href="../fonts/test.ttf" as="font" type="font/ttf">

share|improve this answer

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

edited Aug 16 at 17:33

E_net4

14.5k77 gold badges4444 silver badges8282 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges

answered Mar 28 at 15:37

GProstGProst

4,03022 gold badges1212 silver badges3636 bronze badges