How to package font font-awesome using Webpack
This time I will show you how to use Webpack to package the font font-awesome, and what are the precautions for using Webpack to package the font font-awesome. The following is a practical case, let's take a look.
1. First install the dependencies:
npm install style-loader css-loader file-loader font-awesome-webpack --save-dev
2. Introduce font-awesome in the entry file
require('font-awesome-webpack');
3. Set webpack.config.js to process font files
There are two ways here, if you don’t want to generate font files separately, but want to combine font files with css files To build it into a file, you can use url-loader and set it as follows:
module: { rules: [ // 省略其他配置... // font-awesome { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'url-loader?limit=1000000' }, // 省略其他配置... ] }
Here a parameter limit is passed to url-loader and set to a larger value. This number can be customized, but it must be greater than The size of the maximum font file, because this parameter tells the url-loader that if the file is smaller than this parameter, it will be built directly into the file in the form of Data Url. This method is the most convenient, but the disadvantage is that the built files are very large, and there is no way to use CDN to cache the files when online. It is not recommended to deploy online.
The second method is to specify the output directory of the file of url-loader or file-loader when building, so that when deploying, font-awesome will rely on the font file in the directory specified when building, and There will no longer be the problem of not finding the font file. At this time, the webpack build configuration is as follows:
module: { rules: [ // 省略其他配置... // font-awesome { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader?publicPath=/static/res/&outputPath=font/' }, // 省略其他配置... ] }
After the project built with the above configuration, font-awesome will go to "/static/res/font/ "Look for the specified font file in the directory, and at the same time, the corresponding font folder will be generated in the project you build. You only need to copy the font file in this font folder to the "/static/res/font" directory. (If publicPath is "./", it means that you directly rely on the font file in the build directory, and there is no need to copy it), so that when you access your page, you can correctly request the font file.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Node.js console output log file example analysis
How to use Vue to achieve drag and drop effect
The above is the detailed content of How to package font font-awesome using Webpack. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When inputting text, many friends like to add their favorite personalized fonts, but they do not know where the font folder path of the win10 system is and cannot add fonts. The following will introduce the specific folder path to you. Win10 font folder path: 1. Click "This PC" on the desktop. 2. Enter the system disk C drive. 3. Click the “windows” folder. 4. Pull down to find the "Fonts" folder. 5. You can enter the font library. Friends who have other questions can take a look to learn more about common problems with win10 fonts~

How to change the font in Outlook on Apple mobile phone? First open the Outlook software and click on the file in the upper left corner of the interface. You can set the font according to your own preferences. After the settings are completed, click the OK button. Let’s take a look! How to change the font in Outlook on Apple mobile phone 1. Open the Outlook software and click the "File" option in the upper left corner of the interface. 2. In the list that appears, find "Options" and click to enter. 3. On the left side of the option list, click "Mail". 4. Next, select “Letter and Fonts”. 5. If you want to set the font for new emails, reply emails, or composing, click the corresponding option to enter the settings. 6. Set the font according to personal preference. After the setting is completed, click OK

How to make the font size of vivo mobile phone larger? Where can I set it? In vivo mobile phone, you can make the font size larger, but most users don’t know how to set the font size of vivo mobile phone. Next, the editor brings you the settings of how to make the font size of vivo mobile phone larger. Method graphic tutorials, interested users come and take a look! Vivo mobile phone usage tutorial How to make the font size of vivo mobile phone larger Where to set it 1. First open the [Settings] function in the vivo mobile phone and click on it; 2. Then jump to the settings interface and find the [Display and Brightness] function; 3. Then Reach the page in the picture below and click the [Font Size and Thickness] service; 4. Finally, slide the horizontal line in the picture below to adjust the font size.

Many users want to change the font in Notepad on Windows 11 because the default font is too small or difficult to read for them. Changing fonts is quick and easy, and in this guide, we'll show you how to customize Notepad and change the font to suit your needs. What font does Windows 11 Notepad use by default? As for the default font options, Notepad uses the Consolas font and the default font size is set to 11 pixels. How to change Notepad font size and style in Windows 11? Use the Edit menu in Notepad to click the search button and type notepad. Select Notepad from the list of results. In Notepad, click the Edit menu and select Fonts. You should now see the settings in the left pane

After updating the win11 system, some friends found that their win11 fonts were blurred and very uncomfortable to use. This may be due to a bug in the system version, or it may be that we have turned on special effects. Let’s follow the editor. Let’s see how to solve it. Win11 fonts are blurred: Method 1: 1. First, right-click this computer and open "Properties" 2. Then enter "Advanced System Settings" in the related link 3. Then click "Settings" in Performance to open it. 4. Under "Visual Effects" check "Adjust for Best Performance" and click "OK" to save. Method 2: 1. Right-click a blank space on the desktop and open "Display Settings" 2. Click "Zoom" under Zoom and Layout 3. Then click "Text Size" under relevant settings

Some friends cannot find where their fonts are installed after installing win11 fonts, so they raise the issue of the installation location of win11 fonts. In fact, we can enter the font management in personalization to find the location where the fonts are installed. Let’s take a look below. Win11 font installation location: 1. First, right-click a blank space on the desktop and open "Personalization" settings. 2. Then enter the "Font" installation management settings. 3. Find the font you want and enter it. 4. If you can’t find it, you can also search directly above. 5. After entering the font, you can see the installation location of the win11 font in "Font File" under metadata. 6. If we want to uninstall the font, click Uninstall here.

1. Open the phone settings and click [Display]. 2. Click [Font]. 3. Select the font you like or click [More Fonts] to download the application.

Linux fonts are blurry. How can I make the fonts appear clearly? Let’s take a look at the detailed tutorial below. 1. Install font files 1. Download the file provided by the tool above, then drag the file to the desktop and unzip it. As shown in the picture below, because the file has been decompressed, it is in the form of a folder. 2. Then, without clicking anything on the desktop, right-click and select Open in Terminal. Enter the command in the terminal: sudodpkg-i and press space. Open the decompressed font file on the desktop, and drag the deb package into it one after the -i of this command. After pressing Enter, an error will appear, indicating that the dependency is not installed. If the dependency error is prompted, the command input is normal, otherwise it is an incorrect command. Newbies must pay attention to spaces and capitalization.
