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!