This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

In addition to image resources, there may be other resources that need to be packaged, such as font files. If we need to use a particular font or font icon, we’ll introduce a lot of font files, which can also be handled using Asset Modules Type.

For example, we can find two font ICONS randomly from Ali icon library and add them to the library to download the code:

Download it and unzip it, CSS, iconfont. TTF, iconfont. Eot, iconfont. Woff, and iconfont Directory where these font files are stored) :

  • Supplement:

    • .eot,.ttf,.woff 和 .woff2Represents different font formats, our different browsers will support different font formats;
    • Here,iconfont.cssThese different font format files are loaded by default, so we’ll use this directly latercssFile. We can start with thiscssAt the beginning of the file you see the code for loading files in various font formats:

Then add the iconfont. CSS file to SRC/CSS /index.css (the entry for all CSS in the current project) (this adds to the dependency diagram of Webpack, which will be loaded and packaged later when we use Webpack) :

// ...
@import ".. /font/iconfont.css";

// ...
Copy the code

If we run the NPM run build command to package the project, will it succeed?

Obviously, this won’t work because our current index. CSS file will load the iconfont. CSS file will load the.eot,.woff,.woff2, and.ttf files through the URL. However, Webpack does not recognize font files in these formats by default, so when Webpack parses these font files as modules, it will fail to parse them. Therefore, we need to use appropriate Loader to process these font files. Before Webpack 5, We can use file-loader or url-loader to handle these font files, but in WebPack 5 there is no need to install the corresponding loader because we can use Asset Modules to handle these files.

Also, like these font files, we don’t base64 code it, but copy it directly, using the asset/ Resource type, and the WebPack configuration file is modified as follows:

module: {
  rules: [
    // ...
    // Add processing rules for font files
    {
      test: /.ttf|eot|woff2? $/i,
      type: 'asset/resource'.generator: {
        // Output to the font directory, placeholder [name] preserves the original filename,
        // [hash] to prevent the same file name from being indistinguishable, [ext] takes the suffix
        filename: 'font/[name].[hash:6][ext]'}}}]Copy the code

After adding the above rules, delete the build folder in the root directory of the project and run NPM run build again.

As you can see, the font files have been successfully packaged into the build/font directory.

Font file packaging is no problem, let’s look at the use of font there is no problem. We open the SRC /js/component.js file and create and add an I element to the component() function to display the font icon:

function component() {
  // ...

  // Create an I element and set an icon font
  const iEl = document.createElement('i');
  iEl.className = 'iconfont icon-ashbin';
  element.appendChild(iEl);

  return element;
}
Copy the code

Then delete the build folder in the root directory of the project and run NPM run Build to repackage the project. After the package is successfully packaged, open the index.html page with Live Server and the result is as follows:

Of course, we can also add some styles to the font icon. For example, we can add a class to the I element we created earlier.

function component() {
  // ...

  // Create an I element and set an icon font
  const iEl = document.createElement('i');
  iEl.className = 'iconfont icon-ashbin custom-ashbin';
  element.appendChild(iEl);

  return element;
}
Copy the code

Add the code at the end of the index.css file:

.custom-ashbin {
  color: red;
  font-size: 60px;
}
Copy the code

Delete the build folder in the root directory of the project and repackage the project. Use Live Server to open the index.html page and look like this:

Conclusion: You can use Asset Modules Type to load and package font files, such as MP3 and MP4 files, in future projects.