Detailed explanation of the steps to package font font-awesome with Webpack

This time I will bring you a detailed explanation of the steps of Webpack packaging font font-awesome, what are the precautions of Webpack packaging font font-awesome, the following is a practical case, let's take a look.

When using webpack to build font-awesome or bootstrap, one of the most common problems is the problem of building font files. The problem of not being able to find font files often occurs. Let’s talk about how to correctly build the imported font file:

1. First install the dependencies:

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. In the entry file Introduce font-awesome

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 fonts separately file, but if you want to build the font file and css file into one 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 larger than the size of the largest font file, because this parameter tells the url-loader that if the file is smaller than this parameter, it will be directly built 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:

Vue implements the steps to implement the PopupWindow component

jQuery implements the electronic clock function step-by-step analysis

The above is the detailed content of Detailed explanation of the steps to package font font-awesome with Webpack. For more information, please follow other related articles on the PHP Chinese website!